给多选框写样式
表单示例
1、<form>表单域
<form>标签被用于定义表单域，用来收集和传递用户的信息。<form>中的所有信息内容，都会提交给服务器。基本语法如下；
<form class="" action="index.html（url地址）" method="post" name="表单名称">
<label for="UserName">用户名</label>
<input type="text" placeholder="请输入用户名" id="UserName"/>
</form>
<form>常用属性
1.action：将收集到的表单信息，传递给服务器处理，而action就是接收表单数据的服务器程序的url地址
2.method：用于设置表单数据的提交方式，其取值为get、post
3.name：指定每个表单的名称，必须是一个独一无二的名称，要保证数据的准确采集，以区分同一个页面的多个表单
2.<label>标签
作用：用于绑定一个表单元素，当点击<label>标签的时候，给被绑定的表单元素添加输入焦点
例子1:点击"用户名:"就可以定位光标到输入框
image.png
<label for="UserName">用户名: </label>
<input type="text" placeholder="请输入用户名" id="UserName">
注意：
<label>里的for="名称"，要与<input>里的id="名称"，相同才能触发对应焦点。
3.<input>常用表单控件(重点)
1.单行文本框
<input type="text" name="名称" value="文本框内文字">
<input type="text" name="" placeholder="请输入您的用户名">
2.密码框
<input type=“password” name=“名称”/>
image
3.单选按钮
男<input type="radio" name="sex">
女<input type="radio" name="sex">
image
4.复选框
香蕉<input type="checkbox" name="">
苹果<input type="checkbox" name="">
大鸭梨<input type="checkbox" name="">
image
5.下拉框< select >标签
<select class="" name="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
image
6.textarea文本域
彻底禁用拖动（推荐）：resize: none;
限制字数：maxlength="120"
<textarea name="name" maxlength="120" placeholder="请填写个人信息" style="resize: none;"></textarea>
image
7.按钮
<input type="button" value="普通按钮button">
<input type="submit" value="提交按钮submit">
<input type="reset" value="重置按钮reset">
image
4.<input>表单控件常用属性
1、placeholder 占位符
<input type="text" name="" placeholder="请输入您的用户名">
image
2、autofocus 页面刷新后，改输入框将自动获取焦点
<input type="text" name="名称" placeholder="请输入您的用户名" autofocus>
image
3、required 改表单为必填项，在提交时会进行验证，否则不允许提交
<input type="text" placeholder="请输入您的用户名" required>
image
一份详细的表单案例
案例
<body>
<style media="screen">
td {
padding: 16px
}
</style>
<table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
<caption><h4>青春不常在、抓紧谈恋爱</h4></caption>
<form class="" action="index.html" method="post">
<tr>
<td style="width: 20%"><label for="UserName">用户名</label></td>
<td style="width: 80%"><input type="text" placeholder="请输入用户名" id="UserName"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码" maxlength="6"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex" checked="checked">保密
</td>
</tr>
<tr>
<td>偶像</td>
<td>
<input type="checkbox" name="idol" checked="checked">张艺兴
<input type="checkbox" name="idol"> 吴亦凡
<input type="checkbox" name="idol"> 鹿晗
<input type="checkbox" name="idol">黄子韬
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<select class="" name="">
<option value="">选择年份</option>
<option value="">1990年</option>
<option value="">1991年</option>
</select>
<select class="" name="">
<option value="">籍贯</option>
<option value="" selected="selected">北京</option>
<option value="">上海</option>
</select>
</td>
</tr>
<tr>
<td>给我留言</td>
<td>
<textarea name="name" maxlength="120" placeholder="请填写个人信息" style="resize: none;"></textarea>
<!-- cols={每行中的字数} rows={显示的行数} 还有一个小bug -->
<!-- 彻底禁用拖动（推荐）：resize: none;-->
<!-- 限制字数：maxlength="120" -->
</td>
</tr>
</form>
</table>
</body>
<input/>是单标签、根据不同的表单控件，来使用不同的属性和属性值。
| 属性 | 使用示例 | 描述 |
|---|---|---|
type |
text |
单行文本输入框 |
type |
password |
密码输入框 |
type |
radio |
单选按钮 |
type |
checkbox |
复选按钮 |
type |
button |
普通按钮 |
type |
submit |
提交按钮 |
type |
reset |
重置按钮 |
type |
image |
图像形式的提交按钮 |
type |
file |
上传文件 |
checked |
checked |
定义"单选按钮"、"复选按钮"默认被选中的项 |
selected |
selected |
定义"下拉菜单"默认被选中的项 |
name |
name="UserName" |
指定表单名称，以区分同一个页面的多个表单 |
value |
value="按钮里的文字" |
input控件中的默认文本值 |
placeholder |
placeholder="请输入密码" |
input控件中的默认文本值 |
autofocus |
autofocus |
页面刷新后，改输入框将自动获取焦点 |
required |
required |
表单为必填项，否则不允许提交 |
maxlength |
maxlength="120" |
限制input输入字数 |
新增的<input/>属性值为：
| 属性 | 使用示例（属性值） | 描述 |
|---|---|---|
type |
<input type="email"> |
输入邮箱格式 |
type |
<input type="tel"> |
输入手机号码格式 |
type |
<input type="search"> |
搜索框（体现语义化） |
type |
<input type="number"> |
输入数字格式 |
type |
<input type="range"> |
自由拖动滑块 |
type |
<input type="time"> |
小时分钟 |
type |
<input type="date"> |
年月日 |
type |
<input type="datetime"> |
时间 |
type |
<input type="month"> |
月年 |
type |
<input type="week"> |
星期 年 |
番外5： button添加禁止符号
3371559785850_.pic_hd.jpg
cursor: not-allowed;
番外4： input type=file
input透明度在0，写上宽高
番外3：修改 input type=file 的样式的最简单方法
思路如下：
1、重写一个新的样式
2、将默认样式设置display:none;，即设为不可见
3、在js里调用：当点击新样式的时候，调用这个input的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<img src="添加图片.png" alt="">
<input type="file" style="display:none;">
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click(function() {
$('input').click();
});
});
</script>
</html>
番外1：修改input输入框鼠标点击时边框变色效果
select:focus,
input:focus {
outline: none; /* 清除点击时默认的蓝色焦点框 */
border-style: solid;
border-color: #ff6600;
box-shadow: 0 0 15px #ff6600;
}
番外2：修改输入框placeholder文字样式(颜色,大小,位置)
WechatIMG247.jpeg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input::-webkit-input-placeholder {
/* placeholder颜色 */
color: #aab2bd;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
input {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入手机号">
</body>
</html>
备注：
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
番外6
css input[type=file] 样式美化
.login_Protocol input[type=checkbox] {
width: 20px;
height: 20px;
}
