表单

什么是表单？

收集用户输入信息

 

其中input元素就是一个最重要的表单元素

表单格式

<form>
    <input type=“”>
</form>

 

常见的表单type值及属性

文本框：text

1. value（可设置文本框的默认值），且value值会发送给后台
2. name（告诉后台发送出的内容是什么）

密码框：password

1. value（可设置文本框的默认值），且value值会发送给后台
2. name（告诉后台发送出的内容是什么）

单选框：radio

1. name（默认情况下单选框不会互斥,意思就是可以被多选 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值）
2. value（表示用户选择的数据）
3. checked（默认选中，针对单选框一组只能设置一个）

多选框：checkbox

1. name（有相同name属性值的单选框为一组，一组中只能同时有一个被选中）
2. value（表示用户选择的数据）
3. checked（默认选中）

文件选择框：file

1. multiple（多文件选择）

提交按钮：submit

重置按钮：recset

普通按钮：button

1. 默认是提交按钮
2. type：button、submit、reset
3. 注意点：如果需要使用功能：需要配合form标签一起使用（使用form标签把表单标签一起包裹起来即可）

 

<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）

<legend> 元素用于表示其父元素 <fieldset> 的内容标题

<form action="#">
    <fieldset>
        <legend>注册界面</legend>
        <p>
            账号: <input type="text" name="account">
        </p>
　　 </fieldset>
</form>

 

 

 

label标签

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

绑定格式：

1.将文字利用label标签包裹起来

2.给输入框添加一个id属性

3.在label标签中通过for属性和输入框中的id进行绑定即可

<form action="">
    <label for="account">账号:</label><input type="text" id="account"><br>
    <label for="pwd">密码:</label><input type="password" id="pwd"><br>
</form>

 

select标签

定义一个下拉列表

格式：

<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>

注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

<select>
    <optgroup label="北京">
        <option selected="selected">朝阳区</option>
        <option>昌平区</option>
        <option>通州区</option>
    </optgroup>
    <optgroup label="广州">
        <option>天河区</option>
        <option>越秀区</option>
        <option>黄浦区</option>
    </optgroup>
</select>

 

textarea标签

标签定义多行的文本输入控件

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性

<textarea cols="20" rows="5">
</textarea>