您的位置：首页 > Web前端 > HTML

HTML表单

2017-10-30 21:42 155 查看
用于搜集不同类型的用户输入

1、<form>元素定义HRML表单

<form> form elements</form>

HTML表单包含表单元素

2、表单元素

表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等

3、input元素（最重要的表单元素）

类型描述
text定义常规文本输入。
radio定义单选按钮输入（选择多个选择之一）
submit定义提交按钮（提交表单）
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<form>

fist name:<br/>

<input type="text" name="fistname">

<br/>

last name:<br/>

<input type="text" name="lastname">

<br/>

</form>

</body>

</html>



4、单选按钮输入

<input type="radio">

单选按钮允许客户在有限选项中选择其中之一

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<fo
4000
rm>

<input type="radio" name="sex" value="male" checked>male

<br/>

<input type="radio" name="sex" value="female">female

</form>

</body>

</html



5、提交按钮

<input type="submit">

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<form action="http:www.baidu.com">

fist name:<br/>

<input type="text" name="fistname" value="chen">

<br/>

last name:<br/>

<input type="text" name="lastname" value="jing">

<br/>

<br/>

<input type="submit" value="submit">

</form>

</body>

</html



6、action属性

如5中表单提交到百度页面

一般实际情况下我们会向服务器提交通过提交按钮

7、method属性

规定在提交表单时所用的http方法 GET或者POST

<form action="action_page.php" method="GET">


或：
<form action="action_page.php" method="POST">



何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse


注释：GET 最适合少量数据的提交。浏览器会设定容量限制。


何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

8、name属性

想要正确提交每个字段都需要name属性。否则无法正确提交

9、fieldset属性

用<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>


以上 HTML 代码在浏览器中看起来是这样的：

Personal information:

First name:
 

Last name:
 

form属性列表

属性描述
accept-charset规定在被提交表单中使用的字符集（默认：页面字符集）。
action规定向何处提交表单的地址（URL）（提交页面）。
autocomplete规定浏览器应该自动完成表单（默认：开启）。
enctype规定被提交数据的编码（默认：url-encoded）。
method规定在提交表单时所用的 HTTP 方法（默认：GET）。
name规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate规定浏览器不验证表单。
target规定 action 属性中地址的目标（默认：_self）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航