XHTML表单

最新推荐文章于 2025-07-22 00:16:16 发布

原创最新推荐文章于 2025-07-22 00:16:16 发布 · 620 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml

1、XHTML表单提供一套元素和属性，用来在网页中创建可供用户输入并提交数据图形用户界面。

2、在网页文档中添加一对<form>和</form>标记对，就在网页中定义了一个表单。表单中的输入控件必须包含在 form 元素的标记对内。

最小的表单格式：<form action="URL" method="get | post">

属性：action，定义一个URL，来只是表单中的数据应该被发送到哪里处理，即该属性的值是在一个表单数据程序的URL。

method，控制数据时如何发送到处理程序的，有效取值有两个：get 或 post

在<form>标记中，必须使用属性action 和 method

3、get 和 post 的区分使用：

(1) get 是向特定的资源发出请求，而 post 是向指定的资源提交数据进行处理请求

(2) get 的内容是以字符串方式传送，而 post 是以二进制的方式传送

(3) get 一次传输的数据数量少，而 post 传输的数据数量多

(5) get 方法的安全性比较低， post 的安全性较高。

4、表单输入控件包括 input、select、textarea

(1) input，使用type属性定义不同的控件，包括文本和口令字段、复选框、单选框、提交和重置按钮、隐藏域或图像。

文本框：type 属性为 text。

<form id="myForm" name="myForm" action="#" method="post">
<span style="white-space:pre">	</span><p>姓名<input type="text" id="name" value="" />  </p>
</form>

效果如下，其他类型只要改了type 属性值即可。

口令输入框： type 属性为 password 。

复选按钮： type 属性为 checbox 。 复选按钮的id属性都不一样且name属性也不一样。

单选按钮： type 属性为 radio 。 单选按钮的id属性都不一样，但是name都一样；

隐藏字段： type 属性为 hidden 。隐藏字段提供用户可以看见的表单控件之外，收集名称和值的信息。在跟踪与表单相关的信息时，隐藏字段相当有用。

文件上传：type 属性为 file ，同时在 form 中 enctype 属性为"form/multipart" 允许要上传的文件与其他数据附带在一起传递； method 属性为 post

提交按钮： type 属性为 submit 。

重置按钮： type 属性为 reset 。

命令按钮(普通按钮)： type 属性为 button 。

(2) select ，创建下拉列表。一个<select>元素容纳列表、多个<option>元素集合来标识类表选项。<select>元素的name元素给整个列表命名，每个<option> 元素的value属性来给每个选项一个唯一的值

<form id="myForm" name="myForm" action="#" method="post">
	<p>年份是</p>
	<select id="year" name="year">
		<option value="2014">2014</option>
		<option value="2013">2013</option>
		<option value="2012">2012</option>
	</select>
</form>

(3) testarea ，创建一个多行文本。用rows和columns属性来制定控件的高度和宽度。

<form id="myForm" name="myForm" action="#" method="post">
	<textarea rows="10" cols="30" id="comment">这是一个多行文本框</textarea>
</form>

5、fieldset 和 legend 元素。 fieldset元素备用做表单元素的一个容器，它在被包含的元素的周围显示一个细边框的盒子。legend元素被放在fieldset内部，在盒子上加上一个标题。

<form id="myForm" name="myForm" action="#" method="post">
	<fieldset>
	<span style="white-space:pre">	</span><legend>性别</legend>
		<input type="radio" id="male" name="gender" /> 男<br/>
		<input type="radio" id="female" name="gender" />女
	</fieldset>
</form>