3-1. HTML表单的用法

Form表单的作用

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。故其作用为数据采集。

表单必须要用form标签包围

<form action="服务器地址" method="post or get">...</form>

单行输入文本框

placeholder可在输入框中显示提示信息，一旦输入数据，提示信息便会自动消失。
<div class="username"> <label for="username">账号</label> <input id="username" type="text" name="username" value="" placeholder="手机号/电子邮箱"> </div>

密码输入

type="password"使得输入密码时显示为小圆点，有效保护信息安全。
<div class="password"> <label for="password">密码</label> <input id="password" type="password" name="password" placeholder="请输入密码"> </div>

单选

注意，相同的name为一组选项。value值不能丢，否则后台没有信息。
<div class="sex"> <label>性别</label> <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </div>

多选

注意，value值不能丢，否则后台没有信息。
<div class="hobby"> <label>爱好</label> <input type="checkbox" name="hobby" value="读书">读书 <input type="checkbox" name="hobby" value="跑步">跑步 <input type="checkbox" name="hobby" value="听歌">听歌 </div>

上传附件

可用accept限制文件类型。
<div class="file"> <label>上传头像</label> <input type="file" name="myfile" accept="image/jpg"> </div>

下拉菜单

<div class="select"> <label>选择城市</label> <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guagnzhou">广州</option> </select> </div>

多行文本框

<div class="textarea"> <label>自我介绍</label> <textarea name="article"></textarea> </div>
PS：<rows="行数" cols="列数">

hidden隐藏域

传递数据 但不让用户看到
安全策略 防止伪造页面 ，可以用hidden值做校验 阻止csrf攻击
<div class="hidden"> <input type="hidden" name="abcd" value="123456789"> </div>

按钮

reset为重置表单数据
<div class="button"> <button>提交</button> <input type="reset" name="重置" value="重置"> </div>

效果展示

JS Bin