1.2.6 html 文本框表单

1.2.6 html 文本框表单

1.2.6 文本框表单

文章目录

• 1.2.6 文本框表单
• • 1.`<form>`标签
  • 2.`<label>`标签
  • 3.`<input>`标签
  • 4.`<textarea>`标签
  • 5.`<select>`与`<option>`标签
  • 6.`<button>`标签

1.<form>标签

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

2.<label>标签

绑定某一个输入框，用以解释说明

<label for="输入框id">解释的内容</label>

3.<input>标签

用来填写内容，创建文本框

常见类型有：

• <input type="text">：创建单行文本框。
• <input type="number">：输入纯数字，拒绝非数字输入。
• <input type="email">：输入邮箱，拒绝非邮箱输入。
• <input type="password">：输入密码，用•替换显示。
• <input type="radio">：一个 radio 代表一个选项，用小圆圈表示每个选项，所有 name 一样的 radio 组成一个单选题
• <input type="file">：选择本地文件

常用属性有：

name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：文本框为空时，在文本框中显示 placeholder=“解释” 的内容，比 label 绑定解释更美观

4.<textarea>标签

表示一个多行纯文本编辑控件，可拖拽大小。

5.<select>与<option>标签

表示一个提供选项菜单的控件。

eg：

<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>

6.<button>标签

表示一个可点击的按钮