第三集 表单标签

form 标签

<form action="test.html">
... [form 的内容]
</form>

input 标签

• 各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
• type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
• value: input 中的默认值.
• checked: 默认被选中. (用于单选按钮和多选按钮)
• maxlength: 设定最大长度.

文本框

<input type="text">

密码框

<input type="password">

单选框

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

复选框

<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏

普通按钮

<input type="button" value="我是个按钮">

提交按钮

<form action="test.html">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

重置按钮

<form action="test.html">
  <input type="text" name="username">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

select标签

 <select>
  <option value="1">张三</option>
  <option value="2">李四</option>
  <option value="3">王五</option>
</select>

textarea标签

<textarea> 可以输入多行文本，支持换行、空格。
<textarea> 还可以使用 <input> 中的一些常见属性，如 autocomplete、autofocus、disabled、placeholder、readonly，和 required、maxlength等。

 <textarea>我是textarea的内容</textarea>

label标签

<label> 是一个说明标签，最主要的作用是辅助聚焦，点击 会让其关联的元素得到焦点，for 属性所指的元素 id 就是她的服务客户。
因此 <label> 是表单控件的最佳搭档，点击 label= 等于点击对应元素。
<label> 是一个双标签，里可以嵌套其他行内元素，如文字、图片。

举个栗子
点击文字可选中

男 女

<div style="display: flex">
  <label><input type="radio" name="sex">男</label>
  <label><input type="radio" name="sex" checked="checked">女</label>
</div>

点击文字不可选中

男 女

<div style="display: flex">
  <span><input type="radio" name="sex1">男</span>
  <span><input type="radio" name="sex1" checked="checked">女</span>
</div>