表单标签

表单标签

表单标签是网页与用户进行进行交流的一个东西，它里面有很多种类型的标签，一般情况下，所有的表单标签都会放在<form>这个标签里面

文本输入框

姓名：<input type="text" placeholder="请输入姓名" />

placeholder属性是占位符信息

密码输入框

密码：<input type="password" placeholder="请输入密码" />

密码输入框里面输入的内容是不可见的

数字输入框

年龄：<input type="number" max="40" min="18" step="3" />

• max属性代表最大值
• min属性代表最小值
• step属性代表每次变量的量

日期输入框

日期：<input type="date">

时间输入框

时间：<input type="time" />

日期时间输入框

日期时间：<input type="datetime-local" />

颜色选择框

颜色：<input type="color">

它会在页面上面生成一个带颜色的按钮，点击按钮以后可以选择颜色

滑块

滑块：<input type="range" max="100" min="0" step="10"/>

max属性设置大最值，min属性设置最小值,step属性设置每次变化量

文件选择

附件：<input type="file" multiple accept="image/*" />

1. multiple属性用于设置多选文件
2. accept用于设置选择文件的类型，image/*代表图片类型文件

单选框

性别：
<label>
    <input type="radio" name="sex" >男
</label>
<label>
    <input type="radio" name="sex" checked>女
</label>

1. 多个单选标签如果要构成一组，并需要设置相同的name属性值
2. label标签可以和单选标签结合在一起使用，这样文字就和单选标签组合在了一起
3. checked属性代表当前元素默认选中

复选框

复选框也就是多选框

爱好：
<label><input type="checkbox" checked name="hobby">看书</label>     
<label><input type="checkbox" name="hobby">睡觉</label>
<label><input type="checkbox" name="hobby">玩游戏</label>
<label><input type="checkbox" checked name="hobby">打牌</label>
<label><input type="checkbox" name="hobby">逛街</label>

复选框与单选框的用法非常相似

下拉选择框

籍贯： 
<select multiple size="9">
    <optgroup label="南方">
        <option>湖北省</option>
        <option>广东省</option>
        <option>福建省</option>
        <option selected>广西省</option>
    </optgroup>
    <optgroup label="北方">
        <option>河北省</option>
        <option>黑龙江省</option>
        <option>内蒙古省</option>
        <option>吉林省</option>
    </optgroup>
</select>

1. select标签与option标签结合在一起使用
2. optgroup标签可以将多个选项进行分组，label属性用于设置分组的名称
3. selected属性用于默认选中某个选项
4. multiple属性用于设置多选
5. size属性用于设置展示的option的个数

文本域

文本域：
<textarea placeholder="请输入内容" rows="8" cols="40"></textarea>

1. textarea的开始标签与结束标签最好不要换行
2. rows属性用于设置高度，cols用于设置宽度

---

按钮标签

网页当中的按钮实例方式有很多种，我们可以通过input标签去实现，也可以通过button标签去实现，在这个章节，我们讲解input的按钮

input的按钮它有4种常见的类型

普通按钮

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

value属性用于设置按钮里面的内容

重置按钮

这种按钮是具备一定的功能的，它可以将当前form表单里面的所有表单元素的值重置为默认值

<input type="reset" value="我要重置">

重置按钮的显示默认值是“重置”，我们也可以通过value属性去设置按钮的显示名称

提交按钮

这种按钮也具备定的功能，它可以将当前form表单里面的内容提交到后台服务器，因为目前没有后台服务器，此处先不做演示

<input type="submit" value="确定注册">

提交按钮的默认显示值是“提交”，我们也可以通过value属性去设置按钮的显示名称

图片按钮

<input type="image" src="img/icon.png">

按钮图片有一个特点，在提交信息给服务器的时候它会将点击的坐标提交给服务器

上面的四种按钮虽然可以形成按钮，但是在后面使用这种情况下的按钮非常少，因为这种按钮有一个非常大的缺点，它是单标签

按钮标签2

之前的单标签按钮有很大的缺点，所以现在我们有一个button，它也可以生成我们需要的按钮

<button type="button">
    <b>这是一个双标签的按钮</b>
</button>
<button type="reset">
    <font color="red" size="5">这是一个font的双标签</font>
</button>
<button type="submit">
    <marquee>这是 一个目标滚动的</marquee>
</button>

它的type属性与上面的单标签按钮的用法是保持一致的

---

表单属性

在表单标签里面，还有很多很多的通用属性，现列举如下

1. placeholder占位符属性，当内容为空的时候的提示信息
2. value属性，所有表单元素都会有属性，它设置表单元素的值
3. readonly属性，设置表单元素只读
4. disabled属性，禁用某一个表单元素
5. autofocus属性，设置某一个表单元素自动获取焦点
6. required属性，设置某一个元素必填（在submit提交表单之前会检测这个地方的表单元素是否有值）