HTML标签 之 表单

在网页中,在我们需要收集用户信息的时候,就会用到表单。比如注册账号时有时候需要用户的名字、性别、出生日期、电话、邮箱等,就可以用表单来处理。

一个完整的表单通常由表单域表单控件(表单元素)提示信息 3 个部分构成。

HTML标签 之 表单_第1张图片

一、表单域

表单域是一个包含表单控件的区域,在 HTML 标签中,

标签用来定义表单域,以实现用户信息的收集和传递。 会把它范围内的表单元素信息提交给服务器。


   ...    // 表单控件
  • action:值为 url 地址,用于指定接收并处理表单数据的服务器程序的url地址
  • method:值为 get 或 post, 用于设置表单数据的提交方式
  • name:用于指定表单的名称,因为同一个页面中可能有多个表单域。

二、表单控件

1、 表单控件

input 是输入的意思,在表单控件中, 标签用于收集用户信息。

标签中,包含一个必须的 type 属性,根据 type 不同的值, 可以有多种形式:文本、复选框、单选按钮、按钮等。

    
type 属性值 说明
text 定义单行的输入字段,用户可以在里面输入文本,例如输入用户名
password 定义密码字段,用户输入后看不到明文,一般输入密码时用到
radio 定义单选按钮,比如在选择性别时,实现多选一(多个 radio 必须有相同的 name 才能实现真正的多选一
checkbox 定义复选框,比如在选择“我喜欢的栏目”时,可以同时选择多个(多个 checkbox 有相同的 name 才能把所有的选择都正确传到服务端
button 定义可点击按钮,value 值可以设置按钮文字
file 定义输入字段和“浏览”按钮,供文件上传
reset 定义重置按钮,重置按钮会清除表单中的所有数据
submit 定义提交按钮,提交按钮会把表单数据发送到服务器
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮

标签其他常用属性:

属性 属性值 说明
name 自定义 定义 input 控件的名称
value 自定义 定义 input 控件的值
checked checked 此 input 控件首次加载时应当被选中
maxlength 正整数 输入文字时字符的最大长度
  1. name 和 value 是每个表单控件都有的属性值,主要给后台人员使用
  2. name 是表单控件的名字,要求单选按钮和复选框都要有相同的 name 值

2、

标签用于绑定一个表单控件,当点击 标签内的文本时,浏览器就会自动将光标转到对应的表单控件上,提升用户体验。(可以理解为增大点击区域了)

  
  
  

注意:

3、 标签控件定义下拉列表。例如我们在选择省份和地区时。

4、

当用户需要输入较多内容时,可以使用

其中属性 cols 为每行中的字符数,rows 为显示的行数,实际开发中用 CSS 来控制。

你可能感兴趣的