HTML form 表单
2016-06-26 18:45
323 查看
1.id、name的关系
通常我们在写HTML代码时，会给控件指定一个id属性，这个属性只供JS和CSS使用，在表单提交时，它不起任何作用;
在HTML代码中我们会指定不同的value为各个不同的控件做默认值，那么为那些控件指定相应的id属性将会方便地找到它们;
name属性的值是作为和服务器通信时使用的 key;
如果不需要用JS和CSS控制的控件，或许它们只是用来显示一些数据(只读)，那么就没有必要指定id属性，name属性也可以不用给出(避免提交无意义的数据)。
2.<form> </form> 标签：创建HTML表单
3.get,post ：表单提交方式
[b]说明：[/b]
form用于为用户输入创建HTML表单
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
[b]属性：[/b]
action [URL]: 规定当提交表单时向何处发送表单数据。
method [get/post]: 规定用于发送 form-data 的 HTTP 方法。
[b]get: from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。[/b]
[b]post:from表单里所填的值，附加在HTML Headers上。[/b]
enctype [string]:规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值：
application/x-www-form-urlencoded ：在发送前编码所有字符（默认方式）（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
multipart/form-data ：不对字符编码，包含文件上传控件的表单时，必须使用该值
text/plain ：空格转换为 "+" 加号，但不对特殊字符编码。
title：设置网站访问者的鼠标放在表单上的任意位置停留时，浏览器用小浮标显示的文本。
name:表单的名称。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
[b]表单元素[/b]
[b]1.文本框[/b]
用户名：
密码：
label:
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
文本框属性：
[b]type 属性取值:
text -- 文字输入域(输入型)
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
file -- 可以输入一个文件路径(输入型)
checkbox -- 复选框.可以选择零个或多个(选择型)
radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
button -- 按钮(点击型)
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
reset -- 重置按钮,可以把表单中的信息清空(点击型)
[/b]
[b]name:向服务器提交表单时的 key 值[/b]
[b] [/b]size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。
value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击按钮之后在文本框中显示的值。
maxlength：指定用户输入的最大字符长度。
readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。
disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。
[b]2.单选按钮[/b]
男 女
两个单选按钮的name属性必须相同才能关联起来
[b]3.复选框[/b]
篮球 足球 棒球 兵乓球
[b]4. 文件上传[/b]
使用file，则form的enctype必须设置为multipart/form-data，method属性为POST。
要上传的文件１
[b]5. 下拉框[/b]
<select> 下拉选标签属性：
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
select 写在表单之外，但仍属于表单的一部分（select的form属性，form的id属性）
Volvo
Saab
Opel
Audi
[b]6.文本域[/b]
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
写点啥呢
[b]7.提交，重置[/b]
[b] [/b]
通常我们在写HTML代码时，会给控件指定一个id属性，这个属性只供JS和CSS使用，在表单提交时，它不起任何作用;
在HTML代码中我们会指定不同的value为各个不同的控件做默认值，那么为那些控件指定相应的id属性将会方便地找到它们;
name属性的值是作为和服务器通信时使用的 key;
如果不需要用JS和CSS控制的控件，或许它们只是用来显示一些数据(只读)，那么就没有必要指定id属性，name属性也可以不用给出(避免提交无意义的数据)。
2.<form> </form> 标签：创建HTML表单
3.get,post ：表单提交方式
[b]说明：[/b]
form用于为用户输入创建HTML表单
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
[b]属性：[/b]
action [URL]: 规定当提交表单时向何处发送表单数据。
method [get/post]: 规定用于发送 form-data 的 HTTP 方法。
[b]get: from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。[/b]
[b]post:from表单里所填的值，附加在HTML Headers上。[/b]
enctype [string]:规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值：
application/x-www-form-urlencoded ：在发送前编码所有字符（默认方式）（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
multipart/form-data ：不对字符编码，包含文件上传控件的表单时，必须使用该值
text/plain ：空格转换为 "+" 加号，但不对特殊字符编码。
title：设置网站访问者的鼠标放在表单上的任意位置停留时，浏览器用小浮标显示的文本。
name:表单的名称。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
[b]表单元素[/b]
[b]1.文本框[/b]
<html> <head> <meta charset='utf-8' /> <title>表单</title> </head> <body> <form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data"> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="用户名"/><br/> <label for="passwd">密码：</label> <input type="password" id="passwd" name="passwd"/> </form> </body> </html>
用户名：
密码：
label:
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
文本框属性：
[b]type 属性取值:
text -- 文字输入域(输入型)
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
file -- 可以输入一个文件路径(输入型)
checkbox -- 复选框.可以选择零个或多个(选择型)
radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
button -- 按钮(点击型)
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
reset -- 重置按钮,可以把表单中的信息清空(点击型)
[/b]
[b]name:向服务器提交表单时的 key 值[/b]
[b] [/b]size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。
value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击按钮之后在文本框中显示的值。
maxlength：指定用户输入的最大字符长度。
readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。
disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。
[b]2.单选按钮[/b]
<form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data"> <label for="male">男</label> <input type="radio" id="male" name="gender"/> <label for="felmale">女</label> <input type="radio" id="felmale" name="gender"/> </form>
男 女
两个单选按钮的name属性必须相同才能关联起来
[b]3.复选框[/b]
<form> <label for="b">篮球</label> <input type="checkbox" name="sport" id="b"/> <label for="f">足球</label> <input type="checkbox" name="sport" id="f"/> <label for="c">棒球</label> <input type="checkbox" name="sport" id="c"/> <label for="d">兵乓球</label> <input type="checkbox" name="sport" id="d"/> </form>
篮球 足球 棒球 兵乓球
[b]4. 文件上传[/b]
使用file，则form的enctype必须设置为multipart/form-data，method属性为POST。
<form action="127.0.0.1" method="post" enctype="multipart/form-data"> <p>要上传的文件１<input type="file" name="file"/></p> <p><input type="submit" value="提交" /></p> </form>
要上传的文件１
[b]5. 下拉框[/b]
<select> 下拉选标签属性：
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<form action="127.0.0.1" enctype="multipart/form-data" method="post" id="fname"> </form> <select name="carlist" form="fname"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body>
select 写在表单之外，但仍属于表单的一部分（select的form属性，form的id属性）
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <select name="carlist"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body> </form>
Volvo
Saab
Opel
Audi
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <select name="carlist"> <optgroup label="car"></optgroup> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <optgroup label="fruit"></optgroup> <option value="orange">Orange</option> <option value="apple">Apple</option> </select> </body>
[b]6.文本域[/b]
定义和用法
<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <textarea cols="20" rows="10" name="textarea">写点啥呢</textarea> </form>
写点啥呢
[b]7.提交，重置[/b]
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <input type="submit" value="登陆"> <input type="reset" value="重置"> </form>
[b] [/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐