HTML的笔记及展示（2）（表单元素、input元素、label、button以及HTML5新增的一些元素）

admin管理员组

文章数量:1031694

HTML的笔记及展示（2）（表单元素、input元素、label、button以及HTML5新增的一些元素）

一、HTML原有的表单与表单控件

1.<form…/>元素 用于生成输入表单，该元素不会生成可视化部分。如单行文本框、多行文本框、单选按钮、复选框等都需要放在<form…/>元素内

form元素的重要属性：

action：指定当单击表单内的"确认"按钮时，该表单被提交到哪个位置。该属性必 填。 method：指定提交表单时发送何种类型的请求，该属性可为get或post。该属性必填。action、method用法如下：

代码语言：javascript代码运行次数：0运行复制

<form action="http://39.106.170.146/html/summary/summary01.html" 
method="post"></form>

下面我们看一下GET请求和POST请求的区别： GET请求：直接在浏览器地址栏中输入访问地址所发送的请求，可以看到请求参数名和值，且相对传送数据量较小。

POST请求：通常使用提交表单的方式发送，且不会在浏览器地址栏中显示发送的数据,比较安全,传送数据量较大。

可以看出get请求可以看到网址后面的数据，而post请求看不到，这样post请求就相对更安全，所以建议用post请求。

2.input元素 单行文本框：指定<input…/>元素的type属性为text即可。 密码输入框：指定<input…/>元素的type属性为password即可。 隐藏域：指定<input…/>元素的type属性为hidden即可。 单选框：指定<input…/>元素的type属性为radio即可。 复选框：指定<input…/>元素的type属性为checkbox即可。 图像域：指定<input…/>元素的type属性为image即可。可指定width和height。 文件上传域：指定<input…/>元素的type属性为file即可。 提交、重设、无动作按钮：分别指定<input…/>元素的type属性为submit、reset或batton即可。 checked：设置单选框、复选框初始状态是否处于选中状态。该属性是支持boolean值的属性，表示初始即被选中。 disable：设置首次加载时禁用此元素，该属性是支持boolean值的属性，当type=“hidden”是不能指定该属性。 maxlength：该属性值是一个数字，指定文本框中所允许输入的最大字符数。 readonly：指定该文本框内的值不允许用户修改。该属性是支持boolean值的属性，表示该元素的值是只读的。

实例代码如下：

代码语言：javascript代码运行次数：0运行复制

	单行文本框：<input id="username" name="username" type="text"/><br/>
	不能编辑的文本框：<input id="usename" name="usename" type="text" 
					readonly="readonly"/>
	密码框：<input id="password" name="password" type="password" />
	隐藏域：<input id="hidden" name="hidden" type="hidden"/></br>
	第一组单选框：<br/>
	红：<input id="color" name="color" type="radio" value="red"/>
	绿：<input id="color2" name="color" type="radio" value="green"/>
	蓝：<input id="color3" name="color" type="radio" value="blue"/><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"/>
	<input id="website2" name="website" type="checkbox"
		value="crazy"/><br/>
	文件上传域：<input id="file" name="file" type="file"/><br/>
	图像域：<input type="image" src="../2018.12.17/denglu/weichat_0.jpg"
			alt="登录背景图" width="340" height="210"/><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="无动作"/>
	<button type="button">提交</button><br/>
	<button type="submit"><img src="../2018.12.17/denglu/weichat_0.jpg"
	 width="340" height="210" alt="登录背景图"/>

3.使用label定义标签

<label…/>元素用于在表单元素中定义标签，它有一个额外作用：当用户单击<label…/>所生成的标签时，该标签关联的表单控件元素就会获得焦点。

代码语言：javascript代码运行次数：0运行复制

	隐式使用for属性：<label for="username">单行文本框：</label>
	<input id="username" name="username" type="text"/><br/>
	显式关联：<label>密码框：<input id="password" name="password" 
			type="password" /></label>

4.使用button定义按钮

<button…/>元素用于定义一个按钮，该元素内部可以包含普通文本、文本格式化标签、图像等内容，这也是与input按钮的不同。

代码语言：javascript代码运行次数：0运行复制

<button type="button">提交</button><br/>

5.select与option元素

select元素里只能包含如下两种子元素：

option：用于定义列表框选项或菜单项。（只能包含文本内容作为选项文本） <optgroup…/>：用于定义列表项或菜单项组。该元素只能包含<option…/>子元素。

select元素里指定的一些属性：

disable：设置禁用该列表框和下拉菜单。 multiple：设置该列表框和下拉菜单是否允许多选。（支持boolean属性） size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，select元素就自动生成列表框。 option元素里指定的一些属性： disable：指定禁用该选项。 selected：指定该列表项初始状态是否处于被选中状态。 value：指定该选项对应的请求参数值。

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

下面是简单下拉菜单：<br/>
		<select id="skills" name="skills">
			<option value="java">java语言</option>
			<option value="c">C语言</option>
			<option value="ruby">ruby语言</option>
		</select><br/><br/><br/>
		下面是允许多选的列表框：<br/>
		<select id="books" name="books"
			multiple="multiple" size="4">
			<option value="java">疯狂java讲义</option>
			<option value="android">疯狂Android讲义</option>
			<option value="ee">轻量级java ee企业应用实战</option>
		</select><br/>

二、HTML5新增的表单属性

1.form属性 HTML5为表单控件新增了form属性，用于定义该表单控件所属的表单，该属性值应该是它所属表单的id。

2.formaction属性 一个页面中有多个按钮，需要提交给不同的处理逻辑，formation属性可动态的让表单提交到不同的URL解决了这一问题。

3.formxxx属性 formxxx属性是一些与formaction相似的属性，这里不做赘述

4.autofocus属性 当为某个表单控件增加该属性后，浏览器打开该页面是该组件就会自动获得焦点，并且最多只能有一个表单控件可设置该属性。

5.placeholder属性 在输入文本域地方显示对用户的提示信息

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

用户名:<input type="text" name="name" autofocus placeholder="请输入用户姓名" /><p>
密码:<input type="password" name="name" placeholder="请输入密码"/><p>`

6.list属性 list属性既允许用户输入，也允许用户通过下拉菜单进行选择，该属性必须与<datalist…/>元素结合使用。

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

<datalist id="books">
		<option value="java">疯狂Java讲义</option>
		<option value="ee">轻量级 Java EE</option>
		<option value="android">Android</option>
</datalist>

三、HTML5新增的表单元素

1.功能丰富的input元素

type属性值新增的类型： color：颜色选择器。date：日期选择器。time：时间选择器。datetime-local：本地日期、时间选择器。week：供用户选择第几周的文本框。month：月份选择器 type属性值的<input…/>元素额外支持的属性： min：指定日期、时间的最小值。max：指定日期、时间的最大值。step：指定日期、时间的步长。email：让input元素生成一个E-mail输入框。tel：input生成一个只能输入电话号码的文本框。url：让input元素生成一个URL输入框。search：让input元素生成一个专门用于输入搜索关键字的文本框等。

见如下代码示例：

代码语言：javascript代码运行次数：0运行复制

type="color"的文本框：<br/><input name="color" type="color"/><p>
type="date"的文本框：<br/><input name="date" type="date"/><p>
type="time"的文本框：<br/><input name="time" type="time"/><p>
type="datetime-local"的文本框：<br/><input name="datetime-local" 
								type="datetime-local"/><p>
type="month"的文本框：<br/><input name="month" type="month"/><p>
type="week"的文本框：<br/><input name="week" type="week"/><p>
type="email"的文本框：<br/><input name="email" type="email" multiple/><p>
type="tel"的文本框：<br/><input name="tel" type="tel"/><p>
			<!--pc浏览器不会不通过-->
type="url"的文本框：<br/><input name="url" type="url"/><p>
type="number"的文本框：<br/><input name="number" type="number" min="0"
					 max="100" step="5"/><p>
type="range"的文本框：<br/><input name="range" type="range" min="0" 
					max="100" step="5"/><p>
type="search"的文本框：<br/><input name="search" type="search"/><p>	

四、HTML5新增的客户端校验

1.使用校验属性执行校验

HTML5为表单控件新增了如下几个校验属性 required：该属性指定该表单控件必须填写。 pattern：该属性指定该表单控件的值必须符合指定的正则表达式。

代码示例如下:

代码语言：javascript代码运行次数：0运行复制

图书名：<input name="name" type="text" required/><br/>
		图书ISBN：<input name="isbn" type="text"
			required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
		图书价格：<input name="price" type="number"
			min="20" max="150" step="5"/><br/>
		<input value="提交" type="submit"/>	

2.调用checkValidity方法进行校验

用对话框弹出错误提示

以上方法代码示例如下:

代码语言：javascript代码运行次数：0运行复制

<form action="add" method="post">
		生日：<input id="birth" name="birth" type="date"/><p>
		邮件地址：<input id="email" name="email" type="email"/><p>
		<input type="submit" value="提交" onclick="return check();"/> 
</form>
	<script type="text/javascript">
		var check = function()	{
			return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
			&& commonCheck("email" , "邮件地址" , "字段必须符合电子邮件格式！");
		}
		var commonCheck = function(field , fieldName , tip){
			var targetEle = document.getElementById(field);
			//如果该字段的值为空
			if (targetEle.value.trim() == "")	{
				alert(fieldName + "字段必须填写！");
				return false;
			}
			//调用checkValidity()方法执行输入校验
			else if(!targetEle.checkValidity()){
				alert(fieldName + tip);
				return false;
			}
			return true;
		}
	</script>

在这里插入图片描述

以上是近期总结,只有经常练习使用这些元素,才能熟练掌握.

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent 删除前往查看笔记表单html5inputlabel

HTML的笔记及展示（2）（表单元素、input元素、label、button以及HTML5新增的一些元素）

一、HTML原有的表单与表单控件

1.<form…/>元素 用于生成输入表单，该元素不会生成可视化部分。如单行文本框、多行文本框、单选按钮、复选框等都需要放在<form…/>元素内

form元素的重要属性：

action：指定当单击表单内的"确认"按钮时，该表单被提交到哪个位置。该属性必 填。 method：指定提交表单时发送何种类型的请求，该属性可为get或post。该属性必填。action、method用法如下：

代码语言：javascript代码运行次数：0运行复制

<form action="http://39.106.170.146/html/summary/summary01.html" 
method="post"></form>

下面我们看一下GET请求和POST请求的区别： GET请求：直接在浏览器地址栏中输入访问地址所发送的请求，可以看到请求参数名和值，且相对传送数据量较小。

POST请求：通常使用提交表单的方式发送，且不会在浏览器地址栏中显示发送的数据,比较安全,传送数据量较大。

可以看出get请求可以看到网址后面的数据，而post请求看不到，这样post请求就相对更安全，所以建议用post请求。

2.input元素 单行文本框：指定<input…/>元素的type属性为text即可。 密码输入框：指定<input…/>元素的type属性为password即可。 隐藏域：指定<input…/>元素的type属性为hidden即可。 单选框：指定<input…/>元素的type属性为radio即可。 复选框：指定<input…/>元素的type属性为checkbox即可。 图像域：指定<input…/>元素的type属性为image即可。可指定width和height。 文件上传域：指定<input…/>元素的type属性为file即可。 提交、重设、无动作按钮：分别指定<input…/>元素的type属性为submit、reset或batton即可。 checked：设置单选框、复选框初始状态是否处于选中状态。该属性是支持boolean值的属性，表示初始即被选中。 disable：设置首次加载时禁用此元素，该属性是支持boolean值的属性，当type=“hidden”是不能指定该属性。 maxlength：该属性值是一个数字，指定文本框中所允许输入的最大字符数。 readonly：指定该文本框内的值不允许用户修改。该属性是支持boolean值的属性，表示该元素的值是只读的。

实例代码如下：

代码语言：javascript代码运行次数：0运行复制

	单行文本框：<input id="username" name="username" type="text"/><br/>
	不能编辑的文本框：<input id="usename" name="usename" type="text" 
					readonly="readonly"/>
	密码框：<input id="password" name="password" type="password" />
	隐藏域：<input id="hidden" name="hidden" type="hidden"/></br>
	第一组单选框：<br/>
	红：<input id="color" name="color" type="radio" value="red"/>
	绿：<input id="color2" name="color" type="radio" value="green"/>
	蓝：<input id="color3" name="color" type="radio" value="blue"/><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"/>
	<input id="website2" name="website" type="checkbox"
		value="crazy"/><br/>
	文件上传域：<input id="file" name="file" type="file"/><br/>
	图像域：<input type="image" src="../2018.12.17/denglu/weichat_0.jpg"
			alt="登录背景图" width="340" height="210"/><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="无动作"/>
	<button type="button">提交</button><br/>
	<button type="submit"><img src="../2018.12.17/denglu/weichat_0.jpg"
	 width="340" height="210" alt="登录背景图"/>

3.使用label定义标签

<label…/>元素用于在表单元素中定义标签，它有一个额外作用：当用户单击<label…/>所生成的标签时，该标签关联的表单控件元素就会获得焦点。

代码语言：javascript代码运行次数：0运行复制

	隐式使用for属性：<label for="username">单行文本框：</label>
	<input id="username" name="username" type="text"/><br/>
	显式关联：<label>密码框：<input id="password" name="password" 
			type="password" /></label>

4.使用button定义按钮

<button…/>元素用于定义一个按钮，该元素内部可以包含普通文本、文本格式化标签、图像等内容，这也是与input按钮的不同。

代码语言：javascript代码运行次数：0运行复制

<button type="button">提交</button><br/>

5.select与option元素

select元素里只能包含如下两种子元素：

option：用于定义列表框选项或菜单项。（只能包含文本内容作为选项文本） <optgroup…/>：用于定义列表项或菜单项组。该元素只能包含<option…/>子元素。

select元素里指定的一些属性：

disable：设置禁用该列表框和下拉菜单。 multiple：设置该列表框和下拉菜单是否允许多选。（支持boolean属性） size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，select元素就自动生成列表框。 option元素里指定的一些属性： disable：指定禁用该选项。 selected：指定该列表项初始状态是否处于被选中状态。 value：指定该选项对应的请求参数值。

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

下面是简单下拉菜单：<br/>
		<select id="skills" name="skills">
			<option value="java">java语言</option>
			<option value="c">C语言</option>
			<option value="ruby">ruby语言</option>
		</select><br/><br/><br/>
		下面是允许多选的列表框：<br/>
		<select id="books" name="books"
			multiple="multiple" size="4">
			<option value="java">疯狂java讲义</option>
			<option value="android">疯狂Android讲义</option>
			<option value="ee">轻量级java ee企业应用实战</option>
		</select><br/>

二、HTML5新增的表单属性

1.form属性 HTML5为表单控件新增了form属性，用于定义该表单控件所属的表单，该属性值应该是它所属表单的id。

2.formaction属性 一个页面中有多个按钮，需要提交给不同的处理逻辑，formation属性可动态的让表单提交到不同的URL解决了这一问题。

3.formxxx属性 formxxx属性是一些与formaction相似的属性，这里不做赘述

4.autofocus属性 当为某个表单控件增加该属性后，浏览器打开该页面是该组件就会自动获得焦点，并且最多只能有一个表单控件可设置该属性。

5.placeholder属性 在输入文本域地方显示对用户的提示信息

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

用户名:<input type="text" name="name" autofocus placeholder="请输入用户姓名" /><p>
密码:<input type="password" name="name" placeholder="请输入密码"/><p>`

6.list属性 list属性既允许用户输入，也允许用户通过下拉菜单进行选择，该属性必须与<datalist…/>元素结合使用。

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

<datalist id="books">
		<option value="java">疯狂Java讲义</option>
		<option value="ee">轻量级 Java EE</option>
		<option value="android">Android</option>
</datalist>

三、HTML5新增的表单元素

1.功能丰富的input元素

type属性值新增的类型： color：颜色选择器。date：日期选择器。time：时间选择器。datetime-local：本地日期、时间选择器。week：供用户选择第几周的文本框。month：月份选择器 type属性值的<input…/>元素额外支持的属性： min：指定日期、时间的最小值。max：指定日期、时间的最大值。step：指定日期、时间的步长。email：让input元素生成一个E-mail输入框。tel：input生成一个只能输入电话号码的文本框。url：让input元素生成一个URL输入框。search：让input元素生成一个专门用于输入搜索关键字的文本框等。

见如下代码示例：

代码语言：javascript代码运行次数：0运行复制

type="color"的文本框：<br/><input name="color" type="color"/><p>
type="date"的文本框：<br/><input name="date" type="date"/><p>
type="time"的文本框：<br/><input name="time" type="time"/><p>
type="datetime-local"的文本框：<br/><input name="datetime-local" 
								type="datetime-local"/><p>
type="month"的文本框：<br/><input name="month" type="month"/><p>
type="week"的文本框：<br/><input name="week" type="week"/><p>
type="email"的文本框：<br/><input name="email" type="email" multiple/><p>
type="tel"的文本框：<br/><input name="tel" type="tel"/><p>
			<!--pc浏览器不会不通过-->
type="url"的文本框：<br/><input name="url" type="url"/><p>
type="number"的文本框：<br/><input name="number" type="number" min="0"
					 max="100" step="5"/><p>
type="range"的文本框：<br/><input name="range" type="range" min="0" 
					max="100" step="5"/><p>
type="search"的文本框：<br/><input name="search" type="search"/><p>	

四、HTML5新增的客户端校验

1.使用校验属性执行校验

HTML5为表单控件新增了如下几个校验属性 required：该属性指定该表单控件必须填写。 pattern：该属性指定该表单控件的值必须符合指定的正则表达式。

代码示例如下:

代码语言：javascript代码运行次数：0运行复制

图书名：<input name="name" type="text" required/><br/>
		图书ISBN：<input name="isbn" type="text"
			required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
		图书价格：<input name="price" type="number"
			min="20" max="150" step="5"/><br/>
		<input value="提交" type="submit"/>	

2.调用checkValidity方法进行校验

用对话框弹出错误提示

以上方法代码示例如下:

代码语言：javascript代码运行次数：0运行复制

<form action="add" method="post">
		生日：<input id="birth" name="birth" type="date"/><p>
		邮件地址：<input id="email" name="email" type="email"/><p>
		<input type="submit" value="提交" onclick="return check();"/> 
</form>
	<script type="text/javascript">
		var check = function()	{
			return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
			&& commonCheck("email" , "邮件地址" , "字段必须符合电子邮件格式！");
		}
		var commonCheck = function(field , fieldName , tip){
			var targetEle = document.getElementById(field);
			//如果该字段的值为空
			if (targetEle.value.trim() == "")	{
				alert(fieldName + "字段必须填写！");
				return false;
			}
			//调用checkValidity()方法执行输入校验
			else if(!targetEle.checkValidity()){
				alert(fieldName + tip);
				return false;
			}
			return true;
		}
	</script>

在这里插入图片描述

以上是近期总结,只有经常练习使用这些元素,才能熟练掌握.

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent 删除前往查看笔记表单html5inputlabel

本文标签： HTML的笔记及展示（2）（表单元素input元素labelbutton以及HTML5新增的一些元素）