form表单的各种属性简单列举

来源：互联网发布：中国宏观经济数据分析编辑：程序博客网时间：2024/05/22 03:44

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
1.lable标签的for form 属性
所有主流浏览器都支持 <label> 标签。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
属性
new : HTML5 中的新属性。
属性值描述
for id规定 label 绑定到哪个表单元素。
form formid规定 label 字段所属的一个或多个表单。
定义和用法
for 属性规定 label 与哪个表单元素绑定。
隐式和显式的联系
标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。
例如，在 XHTML 中：
显式的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />

隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>
第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。
第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的。
实例！！！
位于表单之外的标签：
<label for="male" form="nameform">Male</label>
定义和用法
form 属性规定 label 所属的一个或多个表单。
form 属性的值必须是其所属的表单的 id。
如需引用一个以上的表单，请使用空格分隔的列表。
form 属性是 <label> 标签在 HTML5 中的新属性。
语法
<label form="value">
属性值
值描述
id label 所属的一个或多个表单的 id。

form表单的action属性
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
定义和用法：：
必需的 action 属性规定当提交表单时，向何处发送表单数据。
语法：：
<form action="value">
属性值
值描述
URL 向何处发送表单数据。
可能的值：
绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
相对 URL - 指向站点内的文件（比如 src="example.htm"）

form表单的method属性
在下面的例子中，表单数据将通过 method 属性附加到 URL 上：
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
定义和用法
method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。
method 属性
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。
如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。

POST 还是 GET？
如果表单处理服务器既支持 POST 方法又支持 GET 方法，那么你该选择哪种方法呢？下面是有关这方面的一些规律：
如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。
一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。
如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 GET 方法。如果采用 POST 方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。
如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。
如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。
明确传递参数
前面的一些建议也可以作为选择此种方式的一定解释。假设你有一个很简单的表单，其中只包含 x 和 y 这两个参数。在对这些元素的值进行编码时，它们的形式如下所示：
x=28&y=66
如果表单采用了 method=GET，那么用来引用服务器端应用程序的 URL 将如下所示：
http://www.example.com/example/program?x=28&y=66
在任何时候我们都可以创建一个传统的 <a> 标签，用它在调用带有所需参数值的表单，其形式如下所示：
<a href="http://www.example.com/example/program?x=28&y=66">
唯一的问题是，分隔参数所用的 & 符号也是字符实体中的插入符号。如果在 <a> 标签的 href 属性中放入一个 & 符号，浏览器就会将其后面的字符替换成相应的字符实体。
为了防止出现这种情况，我们必须用它的实体对等物来替换 & 符号，也就是用 "&" 或 "&" 来替换。替换之后，上面的那个引用服务器应用程序的非表单示例将如下所示：
<a href="http://www.example.com/example/program?x=28&y=66">
由于这样还是不能在 URL 中使用 & 符号，并且有可能在将来带来混乱，因此我们鼓励服务器设置最后也能够接受用分号作为参数分隔符。您也可以看看自己的服务器文档，了解服务器是否支持这种功能。

form表单的target属性表示在如何打开窗口
<form target="value">
属性值
值描述
_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。
framename 在指定的框架中打开。
form 标签的 enctype 属性
实例
在下面的例子中，表单数据会在未编码的情况下进行发送：
<form action="form_action.asp" enctype="text/plain">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
定义和用法
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
语法
<form enctype="value">
属性值
值描述
application/x-www-form-urlencoded在发送前编码所有字符（默认）
multipart/form-data不对字符编码。
在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
form novalidate 属性
不对输入进行验证的表单：
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
定义和用法
novalidate 属性规定当提交表单时不对其进行验证。
如果使用该属性，则表单不会验证表单的输入。
注释：novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
HTML 4.01 与 HTML 5 之间的差异
novalidate 属性是 HTML5 中的新属性。
语法
<form novalidate="novalidate">
form 内加边框以及在边框上加标题
<form action="" method="" novalidate="novalidate" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend align="center">标题</legend>
</fieldset>
</form>
</body>
</html>

阅读全文

0 0