form元素(提交表单)

<form>~</form>

使用form元素能够实现用户向服务器传送数据功能。form元素中可以使用input元素select元素等这些能够控制表单的元素。

当点击提交按钮时,表单中输入的数据就会被送到服务器中。这时的送信地址由action属性指定,至于提交方法则由method属性指定,提交数据的形式由enctype属性指定。提交到服务器的数据由PHP或者CGI等服务器端脚本语言处理。

属性

1、 accept-charset内容属性
提交表单时,指定使用的文字编码。
汉语的文字编码有“UTF-8”、“GB2312”、“GBK”等。
accept-charset内容属性的值可以是多个文字编码,编码之间使用半角空格分开。
2、action内容属性
提交表单时,指定送信地址的URL。
3、autocomplete内容属性
指定自动完成功能是否有效。

autocomplete属性为自动完成(on)/无效(off),用于是否开启输入栏自动补全功能,默认值为autocomplete="on"。 需要自动补全功能无效时autocomplete="off"。

4、enctype内容属性
指定提交表单时的MIME类型
【enctype属性的可选值(3种):】
5、method内容属性
提交表单时,指定使用的HTTP方法
【method属性的可选值(2种):】
  • get:提交的内容以URL的形式传送(默认值)。
  • post:以文本文件的形式传送。

当method="get"时,提交的内容以URL的形式传送,使用action属性指定的URL的后面添加?与之后的内容一并传送给接受页面。因此,输入的内容会显示在URL上。而且,一般的浏览器对URL的长度有限制,所以不能用该方法提交太长的数据。适合较短的关键词或序号。

当method="post"时,提交的内容将作为文本文件发送,输入内容不会显示在URL上,可以发送长文章。

6、name内容属性
表单的名称。

name属性的值不能指定空文字,不能与同一网页上的其他表单的名字重复。

7、novalidate内容属性
提交表单时,不需要验证。

HTML中可以指定<input type="email">、<input type="url">这样的属性值,如果浏览器支持这样的属性值,当提交表单时,会自动验证输入的邮件或URL是否为有效值,如果是无效值,则不会提交这些数据。该内容属性为逻辑属性,如果有该属性,即验证无效。提交表单时不进行验证处理。

8、target内容属性
打开目标URL的位置。

target内容属性能够指定的值与a元素的target内容属性相同。

使用例

<form action="#.php" method="post">

<p><label>姓名:<input type="text" name="name" size="30"></label></p>

<p><label>血型:

<select name="blood">

<option value="A">A型</option>

<option value="B">B型</option>

<option value="O">O型</option>

<option value="AB">AB型</option>

</select>

</label></p>

<fieldset>

<legend>性别</legend>

<p><label><input type="radio" name="sex" value="male"></label></p>

<p><label><input type="radio" name="sex" value="female"></label></p>

</fieldset>

<fieldset>

<legend>兴趣</legend>

<p><label><input type="checkbox" name="hobby" value="sports">读书</label></p>

<p><label><input type="checkbox" name="hobby" value="reading">绘画</label></p>

<p><label><input type="checkbox" name="hobby" value="music">音乐</label></p>

<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>

</fieldset>

<p><label>评论:<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>

<p><input type="submit" value="提交"><input type="reset" value="清空"></p>

</form>

浏览器上的显示结果↓



性别

兴趣

X

浏览器支持情况

元素
form yes yes yes yes yes