40、HTML 表单

HTML 表单用于收集用户输入
<form> 元素定义 HTML 表单
HTML 表单包含表单元素:表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

40.1 HTML 输入类型,<input> 元素

1) 文本 text
<input type="text"> 定义用于文本输入的单行输入字段,例:

<input type = "text" name = "user">

用鼠标单击框,即可输入任意文本:

2) 单选按钮 radio
<input type="radio"> 定义单选按钮,例:

<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br>

鼠标单击圆按钮,即可选中一个选项,只能同时选中一个:


3) 多选按钮 checkbox
<input type="checkbox"> 定义复选框,例:

<input type = "checkbox" name = "interest" value = "唱歌">唱歌
<input type = "checkbox" name = "interest" value = "电影">电影
<input type = "checkbox" name = "interest" value = "下棋">下棋
<input type = "checkbox" name = "interest" value = "打牌">打牌

点击方框,即可选中选项,可同时选中多个选项:
唱歌
电影
下棋
打牌

4) 密码字段 password
<input type="password"> 定义密码字段,例:

<input type="password" name="psw">

和文本类似,但输入的字符会自动隐藏成小圆圈:

5) 提交 submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮,例:

<input type="submit" value="提交">

单击按钮即可提交:

6) 按钮
<input type="button> 定义按钮,例:

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

自定义文字按钮,点击可以弹出对话框:

40.2、HTML Input 属性

1) value 属性
value 属性规定输入字段的初始值

2) readonly 属性
readonly 属性规定输入字段为只读(不能修改)

3) disabled 属性
disabled 属性规定输入字段是禁用的
被禁用的元素是不可用和不可点击的,被禁用的元素不会被提交。

4) size 属性
size 属性规定输入字段的尺寸(以字符计)

5) maxlength 属性
maxlength 属性规定输入字段允许的最大字符数