一、表单标签
登录注册(输入账号、密码等)、填个人信息、搜索等功能需要用表单标签来实现
1.1 input系列
input 是一个单标签,在网页中用于收集用户信息的表单效果
1.1.1 type属性
input 标签可以通过type属性值的不同展示不同的效果
<p>1 text 文本框,用于输入单行文本</p>
文本框:<input type="text">
<br>
<p>2 password 密码框,用于输入密码</p>
密码框:<input type="password">
<br>
<p>3 radio 单选框,用于多选一</p>
单选框:<input type="radio">
<br>
<p>4 checkbox 多选框,用于多选多</p>
多选框:<input type="checkbox">
<br>
<p>5 file 文件选择,用于之后上传文件</p>
文件选择:<input type="file">
<br>
<p>6 submit 提交按钮,用于提交</p>
<input type="submit">
<br>
<p>7 reset 重置按钮,用于重置</p>
<input type="reset">
<br>
<p>8 不同按钮,默认无功能,需要配合js添加功能</p>
<input type="button">
效果如下
1.1.2 placeholder属性与占位符
input标签的placeholder属性能在文本框中提示用户输入的内容
账号:<input type="text" placeholder="请输入账号">
<br>
密码:<input type="password" placeholder="请输入密码">
效果如下
1.1.3 单选框radio(name属性和checked属性)
单选的具体属性有
- name 分组,属性值为组名,有相同属性值的单选为一组
- checked 默认选中
性别:<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 <input type="radio" name="gender" checked>其他
实际上,多选 checkbox的属性也与之类似,如
性别:<input type="checkbox" name="gender" checked> 男 <input type="checkbox" name="gender" checked> 女 <input type="checkbox" name="gender" checked>其他
1.1.4 文件选择file(mutiple属性)
file的mutiple属性能控制进行多文件选择
<input type="file" multiple>
1.1.5 按钮与表单域
三种按钮(type的属性值)
- submit 提交
- reset 重置
- button 普通按钮
这些按钮功能在一个表单域(form)内实现
表单域是一个双标签,控制了一个表单整体
<form action="">
<!-- action的属性值是表单信息的发送地址 -->
账号:<input type="text" placeholder="请输入帐号">
<br>
密码:<input type="password" placeholder="请输入密码">
<br>
<br>
<input type="submit">
<input type="reset" value="这个是重置">
<input type="button" value="普通按钮">
</form>
注意其中的value属性的属性值为按钮内的文字
1.2 button按钮标签
在表单中,可以直接把button作为一个标签(双标签),其type属性值有submit/reset/button等,效果与input的按钮系列相同
<form action="">
<!-- action的属性值是表单信息的发送地址 -->
账号:<input type="text" placeholder="请输入帐号">
<br>
密码:<input type="password" placeholder="请输入密码">
<br>
<br>
<button>普通按钮</button>
<button type="button">也是普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="menu">菜单按钮</button>
</form>
1.3 select下拉菜单标签
下拉菜单是在网页中提供多个选择项的表单控件
标签组成
- select标签 下拉菜单的整体
- option标签 下拉菜单的每一项
常见属性
- selected:默认选中
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
默认第一个option具有selected属性
1.4 textarea文本域标签
在网页中提供可输入多行的表单控件
标签为textarea(双标签)
常见属性:
- cols:文本域的可见宽度
- rows:文本域的可见高度
注意:实际的设计一般使用CSS
<form action="">
<textarea cols="60" rows="30"></textarea>
<br>
<button type="reset">重置</button>
</form>
1.5 label标签
用于绑定内容与表单标签
1.5.1 使用方法一
- 使用label标签把内容(文本等)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置为对应的id属性
1.5.2 使用方法二
- 直接把label标签把内容和表单标签一起包裹起来
- 把label的for属性删除
性别:
<input type="radio" name="gender" id="male"><label for="male">男性</label>
<label><input type="radio" name="gender" id="female">女性</label>
可以实现在点击“男性”或“女性”的文字时选中相对应的表单