HTML表单

最新推荐文章于 2025-08-04 15:14:34 发布

原创最新推荐文章于 2025-08-04 15:14:34 发布 · 2.8k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

无论是百度的搜索框还是网易邮箱的注册，或是学习强国的答题，这些页面都有一个共同的特点，需要用户输入或是选择数据。这些通过和用户交互来实现的功能，需要表单元素来实现。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分。

1、表单标签：这里面包含了处理表单数据所有数据所用程序的URL及数据提交到服务器的方法。

2、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

3、表单按钮：包括提交按钮、复位按钮和一般按钮，用于执行将数据传送到服务器上的程序或者取消输入，还可以用表单按钮来控制其他定义了代码的处理工作。

1、表单标签

表单标签<form>用于声明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被一同提交到服务器，语法如下；

<form> action="url" method="get|post" enctype="mime" target="..." </form>

表单标签有四个主要属性:

1、action：用来指定处理提交表单的格式。它可以是一个URL地址或一个电子邮件地址。

2、method：用于指明提交表单的HTTP方法，可能的值为post和get。用post方法提交的表单，数据将以数据块的形式提交到服务器，表单数据不会出现在URL中。get方法把名称/值对加在action的URL后面并且把新的URL送至服务器。

3、enctype：指明用来把表单提交给服务器时（当method值为“post”）的互联网媒体形式。这个特性的默认值时“application/x-www-form-urlencoded”。

4、targrt。用于指定提交结果文档显示的位置，和<a>表签中的target属性用法一样。

2、表单域

<form>标签是一个集合，表单域是包含在这个集合中的，用于采集用户的输入或选择的具体元素，包括文本框、多行文本、复选框和下拉选择框等。

1、input标签

<input>标签是表单域中最常用的一类标签，用于收集用户信息，表单中常见的文本框、密码框、单选按钮、复选按钮、按钮等元素，都是<input>标签元素。<input>标签是一个单标签，它的语法格式如下：

<input type="input元素类型" value="元素的值"/>

type属性是<input>标签的重要属性，不同的表现形式就是根据不同的type属性值来实现的。<input>标签中的type属性值如下：

<input>标签 type 属性
属性	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
file	上传文件框
hidden	隐藏域
email	电子邮件输入框
url	网址输入框
number	数字输入框
range	滑动条
color	颜色选择框
date pickers	日期选择框
search	搜索框

1、text属性

text 属性，通常称为文本框，用于定义用户可输入文本的单行输入字段。语法如下：

<input type="text" id="..." name="..." size="..." maxlength="..." value="..." placeholder="..."/>

text常用属性
属性	含义
id	定义文本框的id，要保证数据的准确采集，必须定义一个独一无二的id
name	定义文本框的名称，名称可以重复
size	定义文本框的宽度，单位是字符宽度，默认是20字符宽度
maxlength	定义最多输入的字符数，超出这个值就无法显示
value	定义文本框的初始值
placeholder	定义文本框的提示文字，只有在文本框空的时候显示
required	定义文本框在提交表单之前必须填写输入字段（布尔型属性）
readonly	定义文本框只读，可以通过value设置内容，但不能通过键盘输入（布尔型属性）
disabled	定义文本框禁用，被禁用的文本框显示灰色，不会被提交（布尔型属性）

代码如下：

用户名：
<input type="text" id="user" maxlength="5" size="30" placeholder="手机号或邮箱"/>

这里定义文本框id为user；文本框的宽度是30个字符；最多输入字符为5个。运行后输入字符的话就会发现，输入5个字符后，无论怎样敲键盘，都无法在输入字符；提示文本“手机号或邮箱”在文本框没有内容的时候以浅灰色字体显示，maxlength 属性的设置不会影响提示文本的长度。运行后的文本框如下图显示。

2、password属性

password 属性，通常称为密码框，用于定义用户可输入文本的密码字段，密码字段中的字符会被掩码（显示为星号或圆点），语法如下：

密码：<input type="password" id="pwd" maxlength="8" />

运行后的密码框为下图：

3、radio属性

radio 属性，通常称为单选按钮，用于定义用户可以选择的单选按钮。单选按钮允许用户选取给定一组单选按钮中的唯一一选项。

<input type="radio" name="..." />

单选按钮在网页中是一个可以单击的圆点，单选按钮不输入数据，因此和输入有关的属性在单选按钮中没有意义，如maxlength、size、placeholder等。文本框的id、name和布尔型属性对单选按钮也适用，单选按钮的常用属性如下表：

单选按钮的常用属性
属性	含义
name	一组单选按钮必须定义相同的name属性值，这组单选按钮每次只能选其一
value	单选按钮的value值不会显示在网页中，但可以通过JavaScript代码获取
checked	表示选中状态。这是单选按钮的重要属性，是一个布尔类型的属性

这里定义两个单选按钮，分别代表男、女，默认“男”单选框被选中；

性别：男<input type="radio" name="sex" value="male" checked/>
      女<input type="radio" name="sex" value="female"/>

运行后如下图，两个单选框只能选选择其一，因此两个<input>标签的name属性设置为相同的值“sex”设置两个单选按钮value值为male和female，表示每个单选按钮的含义，默认选择代表“男性”的单选按钮，所以第一个单选按扭设置checked属性。

注意：千万不要把value值和网页中看到的文字“男” "女"混淆，<input>标签实现的单选按钮仅是小圆点，文字是<input>标签外输入的给用户提示的文本。

4、checkbox 属性

checkbox 属性，通常称为复选框，用于定义用户可以选择的复选框，允许用户选取给定一组复选框中的任意多个选项。语法如下；

<input type="checkbox" name="..."/>

复选框在网页中是一个可以单击的方块，图片左侧表示选中的复选框，右侧的表示未选中的复选框，可以通过鼠标的单击改变两种选择状态。复选框的常用属性和单选按钮相同，稍有不同的是name属性，一组单选按钮必须要设置成相同的name属性值，才能实现单选效果。复选框name属性不会影响复选框的选择，但是作为一组出现的复选框，建议要定义相同的name属性值，从代码可读性上可以便于理解，也可以方便JavaScript代码对复选框按钮的控制。

5、file 属性

file 属性，通常称为文件上传框，用于定义用户可以选择文件上传至服务器上传框。文件上传框看上去和其他文本域差不多，只是多了一个浏览按钮，用户可以通过输入需要上传的文件路径或者单击浏览按钮选择需要上传的文件即可，语法如下；

注意：文件上传框只实现文件路径的选择功能，要完成上传功能需要动态程序脚本的配合。

<input type="file"/>

文本框中的属性都适用于文件上传框，文件上框还有一个特有的属性 accept，accept属性用于规定能够通过文件上传进行提交的文件类型，属性值是用逗号隔开的MIME类型列表。如定义一个选择png图片文件的文件上传框，

<input type="file" id="pic" accept="image/png"/>

6、hidden 属性

hidden 属性，通常称为隐藏域，用于定义一个不会被显示的隐藏域。隐藏域对于用户是不可见的，通常会储存一个默认值，他们的值也可以由JavaScript 进行修改，语法如下；

<html type="hidden" id="..."/>

<input>标签的全局属性隐藏域都可以使用，隐藏域不可见，也不会占用页面区域。

7、email 属性

email 属性，通常称为电子邮件输入框，用于定义一个会自动验证电子邮箱地址输入规范的输入框，在表单提交时，会自动验证输入的有效性，如果不正确，会弹出警示框。语法如下；

<input type="email" id="..."/>

输入规则的验证只有在提交表单时发生，我们在表单中添加一个“提交”按钮，代码如下；

<form action="" method="get">
	电子邮件：<input type="email" id="..."/>
    <input type="submit"/>
</form>

电子邮件输入框运行后和普通文本框无异，如果输入内容不符合判定规则，单击“提交”按钮后会出现错误提示。

8、url 属性

url 属性，通常称为网址输入框，用于定义一个会自动验证网址输入规范的输入框，与电子邮件输入框类似，在提交表单时会自动验证输入的有效性。网址验证的规则必须是以“http:”或“fth:”开头，后面加上任意字符，代码如下；

<form action="" method="get">
    网址：<input type="url" id="user_url" /><br/>
    <input type="submit"/>
</form>

运行后文本框输入几个字符，单击“提交”按钮，出现错误会出现提示。

9、number 属性

number 属性，通常称为数字输入框，定义一个只允许数字输入的输入框。如果使用的时移动端支持HTML5的浏览器，输入时会自动切换至数字键盘键。

<input type="number" id="..." min="min" max="max" step="step"/>

数字输入框在获取焦点的时候，在输入框右侧会出现上下两个箭头的微调按钮。

数字输入框有三个属性min、max和step：

min，min属性用于定义数字输入框可以输入的最小值，单击向下箭头，数字递减到最小值后就不会在减小，键盘输入数值时，不会马上验证最小值，在提交表单时会弹出警告框。
max，max属性和min属性类似，用于定义数字输入框可以输入的最大数值。
step，step属性用于定义数字变化时的步长，单击上下箭头递增、递减时以步长为单位增减。数字输入框只允许数字首项是min，公差是step的等差数列中的值。提交表单时会进行验证。

列，定义一个最小值为1，最大值为20，步长为3的数字输入框，这样数字输入框中只能输入数字“1、4、7、10、13、16、19”。

<form action="" method="get">
    数字输入框：<input type="number" id="num" min="1" max="20" step="3" />
    <input type="submit"/>
</form>

运行后输入数字3，单击提交按钮，会弹出警示框，单击向上箭头，数字变化为比当前数字值大且差最小的数列值，这里会变为4，单击向下箭头，数字变化为比当前数字值小且差最小的数列项值。

10、range 属性

range 属性，通常称为滑动条，用于定义一个以滑杆方式显示的数字输入域。

<input type="range" id="..." min="min" max="max" step="step" value="value" />

滑动条是一个设定了输入范围的数字输入区域，滑块滑动到滑杆最左侧，就是最小值min,滑块滑动到滑杆最右侧，就是最大值max,可以通过value属性设置滑块的起始位置，也可以在JavaScript中通过value属性获取移动后的值。

11、color 属性

color 属性，通常称为颜色选择框，用于定义一个可以选择颜色的选择框。颜色选择框的值是以“#”开头的十六进制颜色编码。颜色选择框不能输入内容，只能通过颜色对话框选取颜色，可以通过value属性值获得选取的颜色，也可以通过设置value值来定义初始状态的颜色。如定义一个红色的颜色选择框，代码如下。

<input type="color" id="color" value-"#ff0000"/>

运行后的效果如下图，显示红色色块按钮，单击后弹出“颜色”对话框，选择新颜色后单击“确定”按钮，网页中按钮中的颜色块颜色替换为新选中的颜色，value值也会改变。

12、date pickers 属性

date pickers 属性，通常称为日期选择框。HTML5中提供了一组日期选择框，可以输入不同形式的日期和时间。

date：用于选取年、月、日。
month：用于选取年、月。
week：用于选取年和周数。
time：用于选取时间，包括小时和分钟。
datetime：用于选取时间、年、月、日（UTC时间）。
datetime-local：用于选取时间、年、月、日（本地时间）。

如下定义一个date选择框。

日期：<input type="date" id="date"/>

运行后如下图所示可以直接输入年月日的值，也可以通过微调按钮修改。

13、search 属性

search 属性，通常称为搜索框，定义一个用于搜索的文本框，比如百度或站点搜索，目前只是含义上的区分，显示上和普通文本框没有什么区别。

2、多行文本搜索框

<textarea>标签用于定义多行输入文本框，多行输入文本框可以输入多行文字，需要输入的内容较多时，通常使用<textarea>标签。

<textarea id="message" rows="..." clos="...">
    输入文本
</textarea>

<textarea>标签是一个双标签，文本框中显示的内容是输入在开始标签和结束标签中的文本。rows属性和cosl属性用于定义文本框的大小，单位是字符，如果要定义一个10行，每行30个文字，就要在rows和clos后面输入10和30就可以了。

这里rows和cols定义的值只是多行输入文本框的初始大小，输入文本内容长度并不受限制。输入内容超出文本框大小时会自动添加垂直滚动条。多行文本框的右下角是大小调整按钮，光标移到斜线上，按下鼠标可以调整文本框的大小。

3、下拉选择框

<select>标本用于定义下拉选择框，下拉选择框允许在一个有限的空间设置多种备选选项。在<select>标签内部，用<option>标签来定义选项，

<select id="...">
    <option value="option1">选项1</option>
    <option value="option1">选项2</option>
    <option value="option1">选项3</option>
</select>

<option>标签是一个双标签，标签中输入的内容会显示在下拉选择框的选项列表中，通常我们也会给每个<option>标签加上value属性，value属性值用于JavaScript代码动态获取。

<option>标签有一个重要属性selected，selected属性用于定义在页面加载时预先选定该选项，这是一个布尔型属性，被预选的选项会在下拉选择框中显示。

下拉选择框是<select>标签的常用形式，另一种形式是设置<select>标签的size属性值即可，size属性值用于定义菜单选择框的行数，size属性值大于1时，就显示成菜单选择框的形式。

<select>标签还有一个属性multiple，这是一个布尔型属性，定义了multiple属性的<select>元素可以同时选中多个<option>元素。

4、标注

<label>标签为前面介绍的三类表单域元素定义标注。<label>标签是个双标签，把标注文本输入<label>标签中，这样就可以成为一个元素对象，可以通过CSS或者JavaScript来设置和操作，<label>标签有一个常用的属性for，for属性值应当与标注的表单域元素的id属性相同。

3、表单按钮

表单按钮用于控制表单操作，分为提交按钮、重置按钮一般按钮和图片按钮。表单按钮也用<input>标签定义，通过type属性设置不同的按钮类型。

提交按钮。提交按钮type属性值为submit，用来将输入的信息提交到服务器，单击按钮提交后，会执行<form>标签action属性设置的动态程序文件。

<input type="submit"/>

重置按钮，重置按钮type属性值为reset，用来重置表单内容，单击表单重置按钮后，所有表单域元素恢复初始值。

<input type="reset"/>

一般按钮，一般按钮type属性值为button，用来控制其他定义了处理代码的处理工作，单击一般按钮后，触发按钮click事件，执行该事件函数中定义的操作。

<input type="button"/>

图片按钮，图片按钮type属性值为image，用来定义一个图片提交按钮，该按钮显示为URL路径下的图片，执行提交功能。

<input type="image"/>

提交按钮、重置按钮、一般按钮执行的操作不同，但在显示上并非没有不同，都是以普通按钮的方式显示的，文本框text中介绍的<input>标签属性在按钮中也适用。value值设置的是按钮上显示的文字。

4、表单分组

<fieldset>标签可将表单内的相关元素分组显示，<fieldset>标签将表单内容的一部分打包，生成一组相关表单字段，当一组表单元素放到<fieldset>标签内时，浏览器会以特殊方式来显示他们，他们可能有特殊的边界、3D效果，甚至可创建一个子表单来处理这些元素。

<fieldset>通常不包含属性，如果为了方便CSS和JavaScript找到这个元素，可以为<fieldset>标签设置id属性,<dieldset>标签是一个双标签，分在一组的表单元素要定义成这个标签的子元素。可以在<fieldset>标签子元素中用<legend>标签定义分组标题。

<fieldset id="">
	<legend>标题</legend>
	第一行内容<br>
	第二行内容<br>
	第三行内容<br>
</fieldset>