HTML5表单元素和属性

最新推荐文章于 2021-06-04 19:57:50 发布

古特斯

最新推荐文章于 2021-06-04 19:57:50 发布

阅读量705

点赞数

本文链接：https://blog.csdn.net/fight252/article/details/88781860

版权

本文详细介绍了HTML5中关于表单元素和属性的增强，包括form元素的新属性、input元素的特性和使用，label的定义，button的定义，select与option的用法，textarea的多行文本域，以及HTML5新增的表单属性和元素，如autofocus、placeholder、list、autocomplete等，并探讨了HTML5的表单验证功能。

摘要由CSDN通过智能技术生成

HTML5保留了原来HTML原来的表单及表单控件，并对它们进行了功能上的增强。我们先看看HTML中原有的表单控件。

一.form元素

form作用是用来生成输入表单，除了可以指定id、style、class属性和onclick事件属性，还有一些属性。
1.action：指定当单击表单内的“确认”按钮时，该表单被提交到哪个地址。
2.method：指定表单发送GET或者POST请求。
3.enctype：指定对表单内容进行编码所使用的字符集。
4.name：表单的唯一名称
5.target：使用哪种方式打开url（_blank、_parent、_self、_top）

二.input元素

单行文本框	`<input type="text" />` type属性为text即可
密码输入框	`<input type="password" />` type属性为password即可
隐藏域	`<input type="hidden" />` type属性为hidden即可
单选框	`<input type="radio" />` type属性为radio即可
复选框	`<input type="checkbox" />` type属性为checkbox即可
图像域	`<input type="image" />` type属性为image即可，可以指定width和height两个属性
文件上传域	`<input type="file" />` type属性为file即可
提交、重设、无动作按钮	`<input type="submit" /> <input type="reset" /> <input type="button" />`

几个重要的属性：

checked：设置单选框、复选框初始状态是否处于选中状态。只有type属性值为checkbox和radio时可用。
disabled：设置首次加载使禁用此元素。当type为hidden时不能指定该属性。
readonly：指定该文本框内的值不允许用户修改（可以使用Javascript脚本修改）。

下面是input元素具体实现代码：

<!DOCTYPE html>

<html>

<head>
   <meta http-equiv="Content-=Type" Content="text/html;charset = utf-8" />
   <title>表单元素form</title>
</head>
<body>
    <form action="#" method="post">
       单行文本框：<input id="username" name="username" type="text" /><br>
   	不能编辑文本框：<input id="username2" name="usename" type="text" readonly /><br>
   	密码框：<input id="password" name="password" type="password" /><br>
   	隐藏域：<input id="hidden" name="hidden" type="hidden" /><br>
   	第一组单选框：<br />
   	工人：<input id="professional" name="professional" type="radio" value="worker"  checked />
   	医生：<input id="professional2" name="professional" type="radio" value="doctor" />
       警察：<input id="professional3" name="professional" type="radio" value="policeman" /><br>
   	第二组单选框：<br />
   	男性：<input id="gender" name="gender" type="radio" value="male" />
   	女性：<input id="gender2" name="gender" type="radio" value="female" /><br>
   	两个复选框：<br />
   	<input id="website" name="website" type="checkbox" value="leegang.org" />
   	<input id="website2" name="website" type="checkbox" value="crazyit.org" /><br>
   	文件上传域：<input id="file" name="file" type="file" /><br>
   	图像域：<input type="image" src="one.jpg" alt="weq" width="27" height="31" /><br>
   	下面是四个按钮：<br />
   	<input id="ok" name="ok" type="submit" value="提交" />
   	<input id="dis" name="dis" type="submit" value="提交" disabled />
   	    
   		
   	<input id="cancel" name="cancel" type="reset" value="重置" />
   	<input id="no" name="no" type="button" value="无动作" />
   </form>
</body>
</html>

三.使用label定义标签

<label…/>元素用于在表单元素中定义标签，可以对其他可以生成请求参数的表单控件元素进行说明。不要为label元素指定value值。

隐式使用for属性：指定for属性为所关联表单控件的id属性值。
显式关联：将普通文本、表单空间一起放在label元素内部即可。

下面是两种方式使用代码：

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-=Type" Content="text/html;charset = utf-8" />
	<title>表单元素form</title>
</head>
<body>
    <form action="#" method="post">
	    <label for="username">单行文本框：