action:指定表单数据提交的地址
method:表单数据提交的方法
为了往服务端提交数据时,提交的数据清晰易懂方便处理:
1:普通的输入框,需要添加name属性,来保证键值对的完整。
2:非输入框,需要添加name和value属性,来保证键值对的完整。
另外,name还有分组的作用,
单选框,相同name的是一组,单选框中同一组内的选项有互斥的效果。
复选框,也需要name属性来表明当前的多项是一组。
通过get请求往服务端提交数据的时候,提交的数据会追加在url地址的后面。
以?进行分隔。多个数据之间用&分隔。
get缺点:暴露敏感信息,传输数据有限
get的优点:传输速度快
post请求:传输的数据放在请求体中,而不是暴露在url地址的后面
post:可以隐藏敏感信息,传输的数据多少没有限制
post:传输速度慢 (相对的)
按钮四个:
type:reset 重置按钮
type:submit 提交按钮
type:image 具有提交的功能
<button></button> 具有提交的功能
-->
例:
<form action="ccy.php" method="get">
<fieldset><!--表格边框(一个表格可以分多个区域)-->
<legend>个人信息</legend><!--表格标题-->
姓名:<input type="text" name="name">
<br>
密码:<input type="password" name="pwd">
<br>
性别:<input type="radio" name="sex" value="mam">男
<input type="radio" name="sex" value="women">女
<input type="radio" name="sex" value="secret">保密
<br>
爱好:<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="wangqiu">网球
</fieldset>
<fieldset>
<legend>其他信息</legend>·
文件:<input type="file">
<br>
籍贯:<select name="home">
<option value="sd">山东</option>
<option value="sx">山西</option>
<option value="hn">河南</option>
<option value="hb">河北</option>
<option value="jx">江西</option>
<option value="zj">浙江</option>
</select>
<br>
意见:<textarea name="suggest" cols="30" rows="5">
</textarea>
<br>
<input type="reset" value="清空">
<input type="submit" value="登录">
<button>我也是按钮</button>
<!--<input type="image" src="../../img/f3_Android1.png">-->
</fieldset>
表单常与表格互相嵌套使用,在html5中,表单元素可以放在form表单之外,并通过form属性和表单进行关联
通过关联,form表单之外的表单元素也可以把数据提交。
例:
<form action="check.php" id="ccy">
姓名:<input type="text" name="name" autocomplete="off">
<br>
密码:<input type="password" name="pwd">
<br>
<input type="submit">
</form>
性别:
<input type="radio" name="sex" value="man" form="ccy">男
H5提供的表单类型,具备数据验证的功能,但是验证规则不严谨,建议使用JS正则表达式进行处理
表单属性
autocomplete:输入框内容自动补全
autofocus:自动获取焦点
required:必填项
placeholder:提示信息
readonly:只读
multiple:下拉框的多项选择
selected:下拉框的默认选中项 单选框和复选框通过check属性实现默认选中