HTML中表单元素总结

Posted 2021-04-04 院校帮

在网页中，登录，注册，留言板等需要用户输入选择内容提交的页面都属于表单。

一、表单相关基本标签的使用

（1）表单标签

<form name="form1" method="get" action="...">
...表单元素
</form>

备注:

【1】其中form是表单标签，所有的表单元素，例如文本框之类的都应该放在表单标签里面

【2】method属性用于设置提交方式，提交方式有两种(get,post),其中get是默认值，该提交方式明码传输，对传输数据长度有限制；而post提交方式为暗码传输，对传输的长度没有限制。

---

（2）文本框

<input type="text" />

备注：

【1】在表单元素中除了文本框使用input标签之外，还有很多其它的表单元素也使用input标签，input标签有几个常见的属性如：size设置长度，value设置显示的值，name和id设置元素名称。

---

（3）密码框

<input name="pass" type="password" size="22"/>

---

（4）单选按钮

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

备注：

【1】多个单选按钮需要将其name名字设置成相同，才能实现多个只能选一个的效果，否则上述例子可以同时选择男和女。

【2】其中checked代表默认被选中。

---

（5）多选按钮

爱好：
<input type="checkbox" name="hobby" value="抽烟" checked />抽烟
<input type="checkbox" name="hobby" value="喝酒"/> 喝酒
<input type="checkbox" name="hobby" value="烫头"/> 烫头
<input type="checkbox" name="hobby" value="摸鱼"/> 摸鱼
<input type="checkbox" name="hobby" value="睡觉"/> 睡觉

备注：

【1】多个多选按钮将其name名字设置成相同，后端语言接受数据才会一起接收。

【2】其中checked代表默认被选中。

---

（6）下拉框

所学专业：
<select name="pro" >
<option value="">--前选择--</OPTION>
<option value="电子竞技">电子竞技</OPTION>
<option value="小龙虾养殖">小龙虾养殖</OPTION>
<option value="高级护理">高级护理</OPTION>
<option value="计算机">计算机</OPTION>
<option value="国际贸易">国际贸易</OPTION>
</select>

备注：

【1】其中select标签代表整个下拉框，option代表下拉框中的每一项。

【2】option标签开始和结束之间的文字为网页浏览者看到的下拉框选项内容，而option的value属性中设置的值为表单提交之后交给接收程序的值。

---

（7）文件域

我的靓照:<input type="file" name="photo"/>

备注：文件域用于提供给用户选择本地文件，进行上传操作。

---

（8）文本域（多行文本框）

个人介绍：
<textarea name="textarea" cols="60" rows="10"></textarea>

备注：rows和cols共同控制多行文本框的宽度和高度，rows代表告诉为几行，cols代表宽度为几列。

---

（9）隐藏域

<input type="hidden" value="..." name="...">

备注：隐藏域网页浏览者看不到，但是和其它表单元素一样有数据的存在，表单提交的时候可以接收到隐藏域的数据。

---

（10）邮箱

<input type="email" name="contactme"/>

备注：给用户输入邮箱。邮箱元素表现形式和文本框一样，但是当提交表单的时候网页会自动进行邮箱格式是否正确的判断，并且给出友好提示。

---

（11）url网址

<input type="url" name="myurl"/>

---

（12）数字

<input type="number" name="num" min="1" max="100" step="1"/>

备注：数字元素给用户输入或者选择数字。

【1】min和max分别代表用户输入或者选择输入的最小值和最大值。

【2】step代表数字变化的步长，即用户点击数字框加减数字的时候，增加和减少的数字长度。

（13）按钮

<input type="submit" name="butSubmit" value="submit按钮"/>
<input type="reset" name="butReset" value="reset按钮"/>
<input type="button" name="butButton" value="button按钮"/>
<input  type="image"   />

备注：

【2】reset：重置按钮，可以清空用户的输入或选择内容。

【3】button：普通按钮，用于相应编写的JS脚本程序。

【4】image：图片按钮，用图片替代按钮的样式，并且和submit按钮一样具备数据提交的功能。

---

二、表单相关常见设置及优化

（1）表单元素的只读和禁用

<input name="..." type="text" value="..." readonly>
<input name="..." type="text" value="..." disabled>

备注：其中readonly代表只读，此时文本框没有任何变化，只是不能通过键盘输入内容;disabled代表禁用，此时该文本框背景颜色呈现灰色，并且也不能键盘输入内容。

readonly和disabled不但可以用于文本框，同样也可以用于其它的表单元素。

---

（2）Label标签扩大点击以及获得焦点的区域

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

上述代码，用户必须鼠标点击单选框才能进行选中，如果想要扩大点击区域，点击“男”，“女”汉字的时候也可以选中单选框，可以使用Label标签，进行如下优化：

性别：
<input name="sex" id="boy" type="radio" value="男" checked/> <label for="boy">男</label>
<input name="sex" id="girl" type="radio" value="女" /> <label for="girl">女</label>

备注：保证表单元素的id值和label标签for属性值相等，即可以扩大点击区域到label标签包含的区域。

Label标签扩大点击区域不但可以适用于单选框，同样也适用于其它的表单元素。

---

（3）使用placeholder给输入框添加提示文本，例如文本框中默认显示“请输入用户名”，给用户一个友好提示，当用户进行输入的时候提示文本自动消失。

<input type="text" name="acc"  placeholder="请输入用户名"/>

---

（4）添加required属性给表单元素添加非空判断，即输入框中没有输入内容会给出提示，并且禁止表单的提交

<input type="text" name="username"  required/>

---

（5）使用pattern属性设置正则表达式来判断输入格式的正确性，输入格式错误会自动提示，禁止提交。

身份证:
<input type="text" required="required" pattern="/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/" />

备注：以上代码中pattern属性设置的值为身份证号码的正则表达式，如果需要判断其它格式，在此处替换正则表达式即可。