前言：
HTML里的FORM是用来创建一个表单，实现与本页或其它页面的数据交互。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset和 label 元素 等。
属性
-
action {URL}：一个URL地址；指定form表单向何处发送数据。
-
enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。
指定的值有:application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；
multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值 -
method {get/post}：指定表单以何种方式发送到指定的页面。
指定的值有：get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
post ：form表单里所填的值，附加在HTML Headers上。
<form action="/postInfo" method="post">
</form>
FROM表单的重要元素：
input元素
文本域 type="text"
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
其中 placeholder 属性可以设置在控件未获得焦点时显示的提示信息，而在获得焦点时提示消失。
密码域 type="password"
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="请输入密码">
</div>
复选项 type="checkbox"
<div class="hobby">
<label for="hobby">爱好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>
单选项 type="radio"
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
下拉列表 select
<div class="section">
<label for="car">我的car</label>
<select id="car" name="car">
<option value="TT">TT</option>
<option value="SAAB" selected>萨博</option>
<option value="GTR">GTR</option>
</select>
</div>
option 的 value 属性是必需的，可以对 option 设置 selected 属性实现预选择。
提交按钮 submit button
<input type="submit" value="提交" />
<input type="button" value="提交" />
<button>提交</button>
-
<input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
-
<input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
-
<button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题。
重置按钮 type="reset"
<input type="reset" />
隐藏字段 type="hidden"
<input type="hidden" name="csrf" value="12345623fafdffdd">
隐藏字段对于用户是不可见的。
选择文件 type="file"
<input type="file" name="pic" accept="image/gif" />
accept属性规定可选择的文件类型。
文本框textarea 元素
<textarea name="criticism">ddd</textarea>
适用于大段文字输入
label 元素
在介绍 input 元素时，label 元素已出现多次，例如：
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
label 元素为 input 元素定义标注，当鼠标选择该标签时，关联的元素控件会获得焦点，for 属性与关联元素的 id 属性要相同。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="getInfo">
<form action="/getInfo" method="get">
<div class="username">
<label for="username">姓名：</label>
<input id="username" type="text" name="username" value="输入你的名字">
</div>
<div class="password">
<label for="password">密码：</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
<div class="sex">
<label>性别：</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="sexOrientation">
<label>取向：</label>
<input type="radio" name="sexOrientation" value="男"> 男
<input type="radio" name="sexOrientation" value="女"> 女
</div>
<div class="hobby">
<label>爱好：</label>
<input type="checkbox" name="hobby" value="dota"> dota
<input type="checkbox" name="hobby" value="dour"> 旅游
<input type="checkbox" name="hobby" value="pet"> 宠物
</div>
<div class="textarea">
<label>评论:</label>
<textarea name="article">
</textarea>
</div>
<div class="select">
<label>我的car</label>
<select name="car">
<option value="萨博" selected>萨博</option>
<option value="雅阁" >雅阁</option>
<option value="凯美瑞">凯美瑞</option>
<input type="submit" value="提交" />
</select>
</body>
</html>
网友评论