HTML系列之表单标签

表单标签

1.input系列-文本框和密码框
        表单用于收集用户的输入信息，如我们常看见的登录页面，需要用户输入账号和密码，这时候，我们要拿到用户输入的账号和密码，就需要使用表单标签。

用户名：<input type=“text” placeholder=“请输入用户名”>


密码：<input type=“password” placeholder=“请输入密码”>

input标签的type属性不同，功能也不一样。type=“text” 是文本框，用户可以输入一段文本。type="password"是密码框，用户可以输入密码，内容用一个小点表示。placeholder属性可以显示一段提示信息。

2.input系列-单选框和多选框
        单选框，如我们在网页上看到的二选一，多选一，就使用单选框。多选框可选择多个。

单选框：<input type=“radio” name=“gender” checked>男 <input type=“radio” name=“gender”>女


多选框：<input type=“checkbox”> 看电影 <input type=“checkbox”> 打游戏

前面说过，type的属性不同，功能也不一样，type=“radio” 单选框，如让用户选择性别，此时可以选择 男 单选框，也可以选择 女 单选框，需要给input标签加上name属性，name属性值相同的为一组，构成一组单选框。checked属性表示默认选中。

3.input系列-文件上传
        上传文件表单，如上传用户的头像等，需要用户上传一张图片，这时候就需要使用表单标签系列 file系列。

上传文件：<input type=“file” multiple>

type="file"属性表示要上传文件，multiple属性表示上传多个文件，不写multiple属性默认上传一个文件。

4.input系列-按钮
        通常在登录页面，有一个登录按钮，这里就需要使用表单标签 type属性值为submit，表示提交按钮。type=“reset"属性用于重置文本框和密码框，只不过要放在表单域标签（<form action=”"> </form>）中，重置功能才会生效。type="button"为普通按钮，没有任何功能。

<form action=“”>
用户名：<input type=“text”>


密码:<input type=“password”>


<input type="submit"value=“免费注册”>
<input type=“reset”>
<input type=“button” value=“button”>
</form>

input标签系列

标签名	属性值	说明
input	text	用于输入一段文本信息。
input	password	用于输入一段密码，输入的内容会变成一个个 小点代替。
input	radio	单选框，需要加上name属性，name属性相同的为一组单选框。
input	checkbox	多选框
input	file	上传文件
input	submit	提交表单
input	reset	重置
input	button	普通的按钮，没有功能，需要添加js。默认这个按钮连字都没有，需要加上属性value=“这是一个普通的按钮”

5.select系列-下拉菜单
        提供多个表单的下拉控件。使用select标签，option标签为每一项，selected属性为默认选中。

<select >
        <option >北京</option>
        <option>上海</option>
        <option >广州</option>
        <option selected>深圳</option>
</select>

6.textarea文本域标签
        网页中有一大块文本输入框，就需要使用文本域标签，用于输入一大块的文本信息。

<textarea cols=“30” rows=“10”></textarea>

属性值cols和rows用于设定文本域的大小。

7.label标签
常用于绑定内容与表单标签的关系。

单选框：
<input type=“radio” name=“gender” checked id=“nan”><label for=“nan”>男</label>
<input type=“radio” name=“gender” id=“nv”><label for=“nv”>女</label>

前文中也介绍过input系列标签radio，单选框。这里的单选框多了一个功能：鼠标不论是点击单选框，还是点击字都能选中。