表单格式

<form>
    所有的表单内容，都要写在form标签里面
</form>

• 表单元素本身是指<form>，不过它也有一个更广泛的概念，指构成表单的所有元素.
• <form>主要有两个属性，分别是action和method，action表示表单数据所提交到的处理地址，method表示提交内容的方式，默认为 get，可以设置为 post.

表单元素的通用属性

更多可参考：

• form W3school
• form MDN（页面下面有其相关元素参考）
• 表单属性浅析

Input元素

<!-- 文本输入框 -->
<input type="text" name="username">
<!-- 文本输入框提示信息 -->
<input type="text" name="username" placeholder="用户名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 数字输入框 -->
<input type="number" name="age" placeholder="只能输入数字">
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="密码">
<!-- 单选框 -->
<input type="radio" name="sex" value="man">男
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="music">音乐
<!-- 隐藏域 -->
<input type="hidden" name="other-data" value="用户不可见数据">
<!-- 上传文件 -->
<input type="file" name="file">
<!-- 普通按钮 -->
<input type="button" name="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按钮 -->
<input type="reset" name="reset">

• <input>跟<img>一样，无需闭合标签.
• <input>除通用属性外，还有其常见属性type与placeholder.
• 当是一个输入框时，可设置placeholder，在输入框中灰色显示提示信息.

更多 input 请参考：

• input W3school
• input MDN

Textarea元素

<textarea rows="5" cols="30" placeholder="请输入评论"></textarea>

• 用于多行文本输入，可通过 cols 和 rows 属性来规定 <textarea> 的尺寸，不过等我们学了 CSS 之后，更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸.
• cols(columns)属性表示“列”， 规定文本区内的可见宽度. rows属性表示“行”, 规定文本区内的可见行数.

更多 textarea 请参考：

• textarea W3school
• textarea MDN

Select元素

<!-- 单选且有默认选中值 -->
<select name="tag">
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>
<!-- 多选 -->
<select name="tags" multiple="multiple">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

• 用于创建选项菜单，默认只能选择一个值，可通过设置属性multiple="multiple"来实现多选（很少很少使用多选）.
• 其选项为<option>元素，常用有两个属性value、selected，分别表示选中该选项的值与默认选中.

<select>
    <optgroup label="北京市">
        <option>海淀区</option>
        <option>昌平区</option>
        <option>朝阳区</option>
    </optgroup>
        <optgroup label="广州市">
        <option>天河区</option>
        <option>白云区</option>
    </optgroup>
    <option selected="selected">贵州</option>
</select>

• 可以用<optgroup>元素来进行分组.

更多 select 请参考：

• select W3school
• select MDN

button元素

<button>我是个普通按钮</button>

<!-- 下面的两种方式不建议使用 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

• <button>元素用来定义按钮，跟 input 定义的按钮不同，这个是有闭合标签的. 也可以通过设置 type 属性来实现提交按钮和重置按钮，不过不建议这么做。

更多 button 请参考：

• button W3school
• button MDN

Label元素

<!-- 包裹表单元素 -->
<label>用户名：<input type="text"></label>

<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名：</label><input type="text" id="username">

• <label>元素用于关联表单元素的标题，可直接包裹表单元素，也可以通过设置其 for 属性关联到表单元素的 id 属性，这样点击 label 标题上关联的表单元素就可以自动获取焦点，提升用户体验.

更多 label 请参考：

• label W3school
• label MDN

更多参考

更多关于表单元素知识请参考：HTML5中的表单元素