HMTL之表单标签

1.输入input

      HTML 表单用于收集用户的输入信息。

      HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

  1.1 <input> 表单元素

     <input> 标签用于收集用户信息。

  input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

<input type="属性值" />

 其中：

• input 标签为单标签
• type 属性设置不同属性值来指定不同控件类型

 1.2 常用属性

 

1.2.1  text 文本框  placeholder 占位符

<input type="text" placeholder="文本框占位符" />

1.2.2   password 密码框  placeholder 占位符

<input type="password" placeholder="密码框占位符" />

1.2.3   radio 单选框

           name 属性分组，一个分组只能有一个值被选中

           checked 默认选中

<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" checked />女

1.2.4  checkbox 多选框  checked 默认选中

<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="shanghai" checked />上海

1.2.5   file 文件选择  multiple 多选(按住 ctrl 多选)

<input type="file" /> <input type="file" multiple />

1.2.6   按钮

• submit 提交按钮
• reset 重置按钮
• button 普通按钮

需要配合 form 表单域使用

属性 value 修改按钮显示的值

<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮" />

 注意：

1. 对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。 同理，复选框也要有相同的name值。
2. 单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
3. 设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
4. 设置 type="button"，普通按钮，后期结合 js 使用

 2.button标签

 type 取值

• submit 提交按钮
• reset 重置按钮
• button 普通按钮(默认)

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button>普通按钮</button>

3.select下拉标签

1.  select 标签：设置多个选项让用户选择，节约页面空间。

2.  语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

 3.注：

1. select 中至少包含一对 option。
2. 在 option 中定义属性selected=selected，当前项即为默认选项。

4. textarea 文本域

1. 场景：输入内容较多时。

2.语法： 

<textarea rows="3" cols="20">
    文本内容
</textarea>

3.不常用：cols="每行字符数"，rows="显示的行数"

5.label标签

    1.定义： label 标签为 input 元素定义标注（标签）。label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

    2.作用 ：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

    3.语法：

<input type="radio" name="sex" id="man" />
<label for="man">男</label>

<label><input type="radio" name="sex" />女</label>