3 HTML的表单标签

3.1 输入项标签

<input/>

表单输入项标签之一，用户可以在该标签上 通过填写和选择 进行数据的输入。

• type:设置该标签的种类

  • text:文本框。 默认
  • password:密码框。 内容为非明文
  • radio:单选框。 在同一组内有单选效果
  • checkbox:复选框。 在同一组内有复选效果
  • submit:提交按钮。用于控制表单提交数据
  • reset:重置按钮。 用于将表单输入项恢复到默认状态
  • file:附件框。用于文件上传。
  • hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
  • button:普通按钮。需要和JS事件一起用

• name: 单选框、复选框进行数据的分组。/ 设置该标签对应的参数名

  某个表单输入项需要通过参数列表提交，就必须设置name属性

• value:设置该标签对应的参数值。 / 作为按钮的名字
  value属性的设置策略：

  1. 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以*输入
  2. 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on

• checked:设置单选框/复选框的默认选中状态

• readonly:设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交

• disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交

示例：

3.2 选择标签框

<select></select>

定义一个选择框

• name: 设置该标签对应的参数名
• multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选。

<option></option>

选项标签，用于为一个选择框添加一个选项

• value:设置需要提交的参数值。
• selected:设置选项的默认选中状态

示例

3.3 文本域标签

<textarea></textarea>

表单输入项标签之一，用户可以在该标签上 通过输入进行数据的输入。

• name: 设置该标签对应的参数名

文本域和文本框区别：

1. 文本框不能换行，文本域可以
2. 文本框参数值是value属性，文本域参数值是标签的内容体

3.4 表单标签

<form></form>

用于在效果中定义一个表单，用于提交用户填写的数据。

• action:将数据提交到何处。

• method:将数据以何种方式提交

  • Get提交：把数据拼接到地址栏上（默认）
  • Post提交方式特点：没有把提交数据拼接到地址栏上。请求体

  Get和post提交方式区别：

  • Post方式提交的数据较Get方式相对安全
  • Post方式从理论上提交的数据量无限大，Get方式有限

尽量使用post方式提交表单

3.5 绑定标签

<label></label>

常用于绑定内容与表单标签的关系

• 方法一

  1. 使用label标签把内容包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

• 方法二

  直接用label标签吧内容和表单一起包裹起来

[JavaWeb] HTML的表单标签