如何轻松掌握HTML表单：常用表单元素（控件）的实际操作指南

表单概述

表单一般用来收集用户信息，让用户填写、选择，提交相关信息；在网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单；供用户输入的 HTML 表单通过 <form></form> 标签来创建

在 HTML 中，一个完整的表单通常由表单控件（表单元素）、提示信息和表单域三部分构成

表单控件

包含了具体的表单功能项，例如：单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

提示信息

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作

表单域

相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过表单域定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法；如果不定义表单域，表单中的数据就无法传送到后台服务器

完整的表单包含以下元素

• form 用于创建 HTML 表单
• input 控件，单标签，可用于设置输入框、单选框、复选框、上传文件、提交按钮等
• label 为对应的 input 标签定义标注（可以认为是一个标记或说明）；如果被标注的是输入框，点击标注内容时光标自动在输入框中聚焦
• textarea 控件，用于创建多行文本输入框（文本域）
• select 用于定义下拉列表，需要与 option 标签结合使用；使用 select 时需要设置 name 属性，用于对提交到服务器的表单数据进行标识
• option 定义下拉列表中的项，默认只能选择一项；使用时需要设置 value 属性，提交表单时会将对应的选项值提交到服务器
• fieldest 对相关的表单元素进行分组，通常与 legend 标签结合使用
• legend 为 fieldest 的分组元素定义标题
• button 定义一个按钮，在表单中使用该元素则这个元素具有提交表单的功能；通常在表单中通过 input 标签的 type 属性来设置提交表单的按钮

各标签常见的属性

<form></form> 标签

• name 设置表单的名称

• action 表单的提交动作，表示表单将被提交到哪里；值为 URL 可以是相对地址或绝对地址

• method 表单的提交方法，用何种 HTTP 方法提交表单；一般值为 get 或 post 两种

• enctype 设置表单数据编码的编码方式；服务端会根据设置的编码方式对提交的数据进行解码；

  其值有三种：

  • application/x-www-form-urlencoded 在发送前编码所有字符（默认）
  • multipart/form-data 不对字符编码；在使用包含文件上传控件的表单时，必须使用该值
  • text/plain 空格转换为 “+” 加号，但不对特殊字符编码

<input /> 标签

• name 定义 input 元素的名称；向服务器提交当前标签中的数据时需要设置该属性

• value 设置 input 元素的值

  value 属性对于不同 input 类型，用法也有所不同：

  • 对于 text、password、hidden 类型，用于定义输入框中的初始（默认）值

  • 对于 checkbox、radio、image 类型，用于定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL

  • 对于 button、reset、submit 类型，用于定义按钮上显示的文本内容

    注： input 类型为 checkbox 和 radio 时，必须要设置 value 属性

• maxlength 设置 input 标签中的最大字符个数，值为数值类型，超过最大字符个数的部分不会被录入；一般用于输入框

• autofocus 设置了该属性在页面加载时会自动聚焦，属性值可以不写；一个表单只能有一个 input 标签设置该属性，多用于输入框

• placeholder 用于设置简短的提示文本；多用于输入框，输入内容时提示信息自动消失

• checked 设置某个选项默认被选中；属性值为 checked，可省略不写；该属性只针对 type=“checkbox” 或者 type=“radio” 有效

• accept 设置提交的文件的类型，只针对 type=“file” 有效；点击 “选择文件” 按钮后，在弹出的资源管理器中只显示匹配的文件类型

  属性值有：

  • audio/* 所有音频文件
  • video/* 所有视频文件
  • image/* 所有图片文件

• src 设置以提交按钮形式显示的图像的位置，值为 url；该属性与 type=“image” 配合使用

• alt 图片按钮的图片无法显示时的替代文本；该属性只能与 type=“image” 配合使用

• type 用于决定 input 标签的显示类型；对应的属性值有很多，不同的属性值对应不同的类型，默认为 text 类型

  对应的属性值：

  • text 单行文本输入框，宽度默认为 20 个英文字符

    自动聚焦：

    <input  type="" autofocus="autofocus"/>
    

    
    设置默认值：

     <input type="text"  value="这是默认值" />
    

    
    设置最大字符个数：

    <input type="text" maxlength="6" />
    

    
    设置提示信息：

    <input type="text" name="" placeholder="提示信息">
    

    

  • password 密码输入框，输入的内容会以点的形式显示；同 text 也可以设置 value、maxlength 等

    <input type="password" />
    

    

  • radio 单选按钮，多个选项只能选择一个；在使用一组单选按钮时，多个 input 标签要设置 name 属性并且 name 的属性值要相同；使用该类型的标签必须要设置 value 属性，目的是告诉服务器被选中项的值

    <input type="radio" name="sex