html表单的基本结构

最新推荐文章于 2024-04-25 14:27:36 发布

AUTO_K

最新推荐文章于 2024-04-25 14:27:36 发布

阅读量1.9k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/weixin_44722237/article/details/117825938

版权

表单的基本结构
常用标签： https://www.runoob.com/tags/att-meter-low.html

一个表单有3个基本部分：

1.表单的标签：<form>标签包含所有的表单对象，并定义看提交表单数据的各种属性。

2.表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉列表框和文件上传框等，作用是用来采集信息或者选择数据。

3.表单按钮：如提交按钮、注册按钮和重置按钮等，用于将数据传送到服务器。还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单form标签

<form>标签用来定义表单，在表单中可以插入相应的表单元素。在表单的form标签中可以设置表单的基本属性，包括表单的名称、处理程序和传送方式等。一般情况下，表单的处理程序action属性和传送方法method属性是必不可少对象参数。action属性用于指定表单数据提交到哪个地址进行处理，name属性用于给表单命名。

表单input标签

<input>标签是表单控件元素中功能最丰富的，主要用于收集用户信息，根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本文件、单选按钮、按钮等，如下举一些常用的例子；

value属性设置文本框的内容

单选文本框：<input type="text">

密码输入框：<input type="password">

隐藏域：<input type="hidden">

单选按钮：<input type=""radio>

复选框：<input type="checkbox">

label定义标签

<label>定义标签为input元素定义标注。label元素不会向用户呈现任何特殊效果，它为鼠标用户改进了可用性。如果在label元素内点击文本，就会触发此控件。当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。<label>标签上的for属性应当与相关元素的id属性相同。

格式如下：

button按钮

在button元素内部可以放置的内容如文本或者图像，这时该元素与使用input元素创建的按钮之间的不同之处。

button按钮的属性
属性	说明
name	定义按钮的名称
type	定义按钮的类型，只能是button、reset或者submit其中的一个
value	定义按钮的初始值
disabled	定义是否禁用此按钮

<select>和<option>标签

<select>用于创建单选或者多选菜单，其是一种表单控件，空用于在表单中接受用户的输入。

<option>标签用于定义列表中的可用选项。value属性规定在被提交时被发送到服务器的值。

<option> 与</option>之间的值是浏览器显示下拉列表中的内容，而value属性中的值是表单被提交时别发送放到服务器的值，如果没有指定的values属性，选项的值将数组为<option>中的内容。

<select>
			<option value="1">java</option>
			<option value="2">html</option>			
			<option value="3">c#</option>			
		</select>

<fieldset>和<legend>标签

<fieldset>标签可以将表单的相关元素分组，并会在相关表单元素周围绘制边框。

<legend>标签用于对<fieldset>标签定义标题。

	<form id="a">
			<fieldset disabled="" form="" name="s">
				<legend>注册</legend>
				姓名：<input type="text" /><br />
				年龄：<input type="text" />
			</fieldset>
		</form>

html5增强的<textarea>标签

<textarea>标签用于定义多行文本域，文本域中可容纳大量的文本，可以通过cols和rows属性来规定<textarea>的尺寸大小，也可以在css中使用height和width定义它的尺寸。

html5中新增的表单元素

input元素

html5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。新增的表单输入类型如下。

email：email类型应用于包含E-mail地址的输入域。

url：url类型用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。

number：number类型用于包含数值的输入域。

range：range类型应用于包含一定范围内数字值的输入域。

date pickers：日期选择器。

search：用于收索域，例如站点收索或者谷歌收索。

color：用于生成一个颜色选择器。

output元素

<output>标签作为计算结果输出显示，如执行脚本的输出。<output>标签是HTML5中的新标签，它的一些属性值如下表，IE浏览器不支持该属性。

,<output>标签的属性
属性	属性值	说明
for	element_id	描述计算中使用的元素域计算结果之间的关系
form	form_id	定义输入字段所属的一个或多个表单
name	name	定义对象的唯一名称，表单提交时使用。

	<form oninput="a.value=parseInt(x.value)+parseInt(y.value)">
			<input type="number" id="x" />+<input type="number"  id="y" value="30"/>=
			<output name="a" for="x+y"></output>
		</form>

效果图：

meter元素

<meter>标签常用于定义度量衡，常用于静态比例显示，如：磁盘用量、查询结果的相关性的等。<meter>标签不应该用于进度条中，请使用<progress>标签。IE浏览器不支持该属性。

<meter>标签的属性
属性	属性值	说明
high	number	定义被视作高的值的范围
low	number	定义被视作低的值的范围
max	number	定义范围的最大值
min	number	定义范围的最小值
value	number	定义度量值，可以是浮点数，默认为0

low 属性规定度量的值位于哪个点，被界定为低的值。

low 属性的值必须大于 min 属性的值，且必须小于 high 和 max 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title</title>
	</head>
	<body>
		<h1>c盘和d盘已占用空间</h1>
		c盘：<meter value="0.8"></meter><br />
		d盘：<meter value="0.6"></meter>
		<h1>你喜欢苹果还是喜欢香蕉</h1>
		苹果：<meter min="0" max="100" value="80"></meter><br />
		香蕉：<meter min="0" max="100" value="20"></meter>
		<p>展示给定的数据范围：</p>
		<p>Anna's score: <meter min="0" low="40" high="90" max="100" value="95"></meter></p>
		<p>Peter's score: <meter min="0" low="40" high="90" max="100" value="65"></meter></p>
		<p>Linda's score: <meter min="0" low="40" high="90" max="100" value="35"></meter></p>

		<p><strong>注意：</strong> IE 浏览器不支持 meter 标签。</p>
	</body>
</html>

效果图：

progress元素

<progress>标签用于定义运行中的任务进度、进程，可以使用progress元素来显示JavaScript中耗费时间的函数进程。IE9或者更找的版本的IE浏览器不支持<progress>标签。

<progress>标签的属性
属性	属性值	说明
max	number	定义需要完成的值
value	number	定义进度当前的值

keygen元素

用处是提供一种验证用户的可靠方法。当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥存储域客户端，公钥则被发送到服务器。公钥用于之后验证用户的客户端证书。

使用方法如下：

<form action="#" method="get">
			用户名：<input type="text"  name="user_name"/><br />
			加密：<keygen name="security" /><br />
			<input type="submit" />
		</form>

效果图：

HTML5中新增的表单属性

1.formaction属性

假如一个界面中有一个填写信息的表单，用于注册和登录，程序需要这两个按钮提交给不同的处理逻辑。在HTML5之前，需要使用JavaScript来实现，当用户点击不同的按钮时，通过使用JavaScript控制修改<form>元素的action属性，来达到上述要求。

使用HTML5中的formaction属性可以简单的处理这个问题，对于<input type="submit" />、<button type="submit"></button>和 <input type="image" />元素，都可以指定formaction属性，该属性即可让表单提交到不同的URL。

<form method="get">
				登录：<input type="text" name="fname" /><br />
				注册：<input type="text" name="lname" /><br />
				<input type="submit" value="登录" formaction="login.html"/>
				<input type="submit" value="注册" formaction="regist.html" />
			</form>

2.formmethod属性

formmethod属性可以动态的设置表单以post或者get方式提交，覆盖form元素中原有method属性。

<form action="#" method="get">
			登录：<input type="text" name="fname" /><br />
			注册：<input type="text" name="lname" /><br />
			<input type="submit" value="登录" formmethod="get" />
			<input type="submit" value="注册" formmethod="post" /><br />			
		</form>

3.autofocus属性

autofocus属性用于页面的加载完成时，某个表单自动获得焦点。由于页面中只能有一个表单元素可以获取焦点，所以整个页面最多只能设置一个autofocus属性。目前大部分浏览器已经支持该属性。

4.placeholder属性

此属性用于设置文本域中未输入内容时的显示内容，当用户获得该文本框的焦点或输入时，该属性的值就会消失。

5.list属性

list需要结合,<datalist>标签一起使用，形成一个下拉菜单的效果，list的属性值指定<datalist>标签的id值。

<form action="#" method="get">
			<input type="text" name="fname" list="fruits" />
			<option>a</option>
			<option>b</option>
			<option>c</option>
		</form>
		<datalist id="fruits">
			<option>香蕉</option>
			<option>苹果</option>
			<option>西瓜</option>			
		</datalist>

效果图：

6.autocomplete属性

定义表单是否该启用自动完成功能。自动完成功能是当用户在字段开始输入值时，浏览器基于之前的输入过的值，显示出在字段中填写的选项。

<form autocomplete="on">
			xm:<input type="text" name="fname"/>
			<input type="submit" />
		</form>

HTML5中新增的客户端校检

在以前,客户端校检通常使用JavaScript来完成，自HTML5出现以后，表单增加了一些校检属性，只需要设置这些校检属性即可完成客户端的校检。

HTML5新增的表单校检属性

required：定义表单不能为空。属性值为required或者省略。

pattern：定义表单满足相应的正则表达式。

	<form action="#">
			手机号：<input type="text" title="请输入11位有效的手机号" pattern="1[0-9]{10}" required="required" /><br />
			<input type="submit"  value="提交"/>
		</form>

自定义错误提示

在HTML5中，可以使用setCustomValidity(）方法自定义错误提示信息，在提交表单时就会看到弹出的提示提示框中包含的错误信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title</title>
	</head>
	<body>
		<form action="#">
		<input type="text" onchange="verify (this)" id="fname"/><br />
		<input type="submit" value="提交" onclick="cs();" />
		</form>
	</body>
</html>
<script>
	function verify(input){
		if(input.value.length<15){
			input.setCustomValidity("感想不能少于15个字");
		}else{
			input.setCustomValidity("");
		}
	}
	function cs(){
		var a=document.getElementById("fname").value.length;
		if(a<15){
			document.getElementById("fname").value='请重新输入';
			alert("感想不能少于15个字");
		}else{
			document.getElementById("fname").value='ok';
		}
	}
</script>

关闭校检

如果需要关闭HTML5对表单提供的校检功能，有以下两种方案实现。

1.在<form>表单中添加novalidate属性。禁止整个表单的验证功能。 <form action="#" novalidate>

2.给提交按钮添加formnovalidate属性。 <input type="submit" value="提交" formnovalidate="formnovalidate" />

AUTO_K

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html表单的基本结构

表单的基本结构一个表单有3个基本部分：1.表单的标签：<form>标签包含所有的表单对象，并定义看提交表单数据的各种属性。2.表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉列表框和文件上传框等，作用是用来采集信息或者选择数据。3.表单按钮：如提交按钮、注册按钮和重置按钮等，用于将数据传送到服务器。还可以用表单按钮来控制其他定义了处理脚本的处理工作。表单form标签<from>标签用来定义表单，在表单中可以插入相应的表单元素。在表单的f..
复制链接

扫一扫