HTML5 表单

表单 <form>

前端跟后端数据的传输方式，最常见的就是通过表单，Javascript最初被发明，就是为了解决表单提交的数据验证问题。

表单的基本结构

<form method="post" action="index.php" >
<label>用户名：<input type="text" name="user" /></label>
<label>密　码：<input type="password" name="password" /></label>
<label>隐　藏：<input type="hidden" name="hidden" /></label>
<label>上　传：<input type="file" name="file" /></label>
<label>内　容：<textarea rows="3" cols="20"></textarea></label>
<label>单选框：<input type="radio" name="num" /> 1 <input type="radio" name="num" /> 2</label>
<label>多选框：<input type="checkbox" name="apple" /> apple <input type="checkbox" name="banana" /> banana</label>
<label>复选框：<select><option name="age">19</option><option name="age">21</option></select></label>
<label><input type="submit" value="提交"></label>
</form>

value、method、action以及更多上面没提到的，跟服务器相关的属性，会在后端篇讲。

效果

表单属性

除了上述列举的表单属性之外，还有几个也是比较常用的属性。

<input type="text" placeholder="用户名" /> <!-- placeholder 提示 -->
<input type="text" value="hello" readonly /> <!-- readonly 只读 -->
<input type="text" required /> <!-- required 必填 -->
<input type="text" disabled /> <!-- disabled 禁用 -->
<input type="text" maxlength="5" /> <!-- maxlength 最大值 -->

效果