html元素 —— 表单元素及实用属性

红太狼 2022-09-25 12:25 166阅读 0赞

一、常用表单元素

<form>:定义供用户输入的表单。

<fieldset>:定义域。即输入区加有文字的边框。

<legend>：定义域的标题，即边框上的文字。

<label>：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

<input>:定义输入域，常用。可设置type属性，从而具有不同功能。见详解。

<isindex>:已废弃，用input标签代替。

<textarea>:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

<button>:定义一个按钮。

<optgroup>:定义选项组。选项组内需要放选项<option>。下拉列表<select>通常对应一个选项组，故此标签不常用。见详解。

<select>:定义一个选择列表，即下拉列表。见详解。

<option>:定义下拉列表中的选项。见详解。

html5新增：

<datalist>定义填写一个input时，提示几个datalist内的多个option用于选择。可通过input的list特性与此元素作关联。见详解。

<output>表示计算的结果。可通过for特性与其它能够影响运算的元素（如input）作关联。见详解。

二、常用表单元素详解

1、<input>：

常用type属性：button、checkbox、file、hidden、image、password、checkbox、radio、reset、submit、text。

html5新增type属性：

1）、search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。

2:）、tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉（普通的text并不会，故text类型验证输入值时一般需要trim()函数处理）。

3）、url：编辑url的控件，提交时换行符与首位的空格都将自动去除。

4）、email：可输入一个邮件地址。

此外，还有color、date、time、datetime、datetime-local、month、week、number、range类型。见MDN 网站。

html5中input新增的个人觉得比较有用的特性：

1）、list：关联该input对应的<datalist>的id（即datalist在form外建立，通过list属性关联即可）。

2）、pattern：一个正则表达式，用于检查控件的值，可作用于text、search、tel、url、email类型的input。

3）、form：一个字符串(为关联的form表单的id)，用于表明该input属于哪个form表单（作用类似list）。

4）、formmethod：表明使用GET还是POST，能覆盖form表单的method。仅在type为image或submit，且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

5）、readonly：一个boolean值，表明该input值是否能被用户修改，可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

6）、maxlength：type为text、emal、search、password、tel或url（都为文本）时允许输入的最大字符个数。

7）、autocomplete：浏览器是否根据之前提交的输入情况提示之前输入的相似数据（即以option形式匹配之前的输入值），取值on或off，默认on。如在登陆页面不想显示上一个登录的用户名等时，可设置为off。

**所有html5新增的特性：*https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input\#attr-placeholder***

例：

上面的表单，实际提交时，将会在浏览器url看到提交了name="name"的input与name=”number“的input，且提交方式为GET。

2、<select>与<option>：

例：下面的拉下列表默认选中Back，未指定cheacked，则默认选中首个option。

三、几点说明

1、checkbox与radio：复选框与单选框。

一组复选框或一组单选框类型的input，其name应相同，表明为一组。表单提交时，一组内多个选上的复选框，其键值对分开传递，可从浏览器url查看。一组radio同样name应相同，只能选择一个选项，作用等同于下拉列表。

html元素 —— 表单元素及实用属性

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML表单元素

相关 HTML表单元素概述,HTML表单元素的简单介绍

相关 html元素 —— 表单元素及实用属性

相关 HTML5表单元素

相关 HTML5表单元素

相关 HTML元素及属性（二）

相关 HTML元素及属性（二）

相关 HTML5 表单元素 —— input元素

相关 HTML5表单元素

相关 HTML元素标签、表单元素详解