表单

`<form>`标签

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

`<input>`标签

HTML <input>用来填写内容，常见类型有：

<input type="text">：创建基础的单行文本框。
<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
<input type="email">：带有 “email” (电子邮箱) 类型标记的输入框元素 (<input>) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。
<input type="password">：<input> 元素里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。
<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。

常用属性有：

name: 名称
id: 唯一ID
maxlength: 最大长度
minlength: 最小长度
required: 是否必填
placeholder: 当表单控件为空时，控件中显示的内容

`<textarea>`标签

HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

`<select>`与`<option>`标签

HTML <select> 元素表示一个提供选项菜单的控件。

示例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

Choose a pet:

`<button>`标签

HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。

示例

代码

<form action="/login.html">
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" required minlength="3" maxlength="15" placeholder="用户名">

    <br>
    <label for="age">年龄</label>
    <input type="number" name="age" id="age" required placeholder="年龄">

    <br>
    <label for="email">邮箱</label>
    <input type="email" name="email" id="email" required placeholder="邮箱">

    <br>
    <label for="password">密码</label>
    <input type="password" name="password" id="password" required placeholder="密码">

    <br>
    <label for="resume">个人简介</label>
    <textarea name="resume" id="resume" cols="30" rows="10" placeholder="个人简介"></textarea>

    <br>
    <label for="lang">语言</label>
    <select name="lang" id="lang">
        <option value="Cpp">Cpp</option>
        <option value="Java">Java</option>
        <option value="Python">Python</option>
    </select>

    <br>
    <button type="submit">提交</button>
</form>

表单

<form>标签

<input>标签

<textarea>标签

<select>与<option>标签

<button>标签

示例

代码

结果

`<form>`标签

`<input>`标签

`<textarea>`标签

`<select>`与`<option>`标签

`<button>`标签