HTML - 表单（form）-

给多选框写样式

表单示例

1、

表单域

标签被用于定义表单域，用来收集和传递用户的信息。中的所有信息内容，都会提交给服务器。基本语法如下；

        用户名
        

常用属性
1.action：将收集到的表单信息，传递给服务器处理，而action就是接收表单数据的服务器程序的url地址
2.method：用于设置表单数据的提交方式，其取值为get、post
3.name：指定每个表单的名称，必须是一个独一无二的名称，要保证数据的准确采集，以区分同一个页面的多个表单

---

2.标签

作用：用于绑定一个表单元素，当点击标签的时候，给被绑定的表单元素添加输入焦点
例子1:点击"用户名:"就可以定位光标到输入框

image.png

用户名: 

注意：里的 for="名称"，要与里的id="名称"，相同才能触发对应焦点。

---

3.常用表单控件(重点)

1.单行文本框

2.密码框

image

3.单选按钮

    男
    女

image

4.复选框

    香蕉
    苹果
    大鸭梨

image

5.下拉框< select >标签

    
        北京
        上海
        深圳
    

image

6.textarea文本域

彻底禁用拖动（推荐）：resize: none;
限制字数：maxlength="120"

image

7.按钮

image

---

4.表单控件常用属性

1、placeholder 占位符

image

2、autofocus 页面刷新后，改输入框将自动获取焦点

image

3、required 改表单为必填项，在提交时会进行验证，否则不允许提交

image

---

一份详细的表单案例

案例

    
    

        
青春不常在、抓紧谈恋爱
        
            

                
用户名
                

            
            

                
密码
                

            
            

                
性别
                

                     男
                     女
                    保密
                
            
            

                
偶像
                

                    张艺兴
                     吴亦凡
                     鹿晗
                    黄子韬
                
            
            

                

                

                    
                    
                    
                
            
            

                
上传头像
                

                    
                
            
            

                
年龄
                

                    
                        选择年份
                        1990年
                        1991年
                    
                    
                        籍贯
                        北京
                        上海
                    
                
            
            

                
给我留言
                

                    
                    
                    
                    
                
            
        
    

---

是单标签、根据不同的表单控件，来使用不同的属性和属性值。

属性	使用示例	描述
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输入字数

新增的属性值为：

属性	使用示例（属性值）	描述
type		输入邮箱格式
type		输入手机号码格式
type		搜索框（体现语义化）
type		输入数字格式
type		自由拖动滑块
type		小时分钟
type		年月日
type		时间
type		月年
type		星期 年

---

番外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的点击事件

---

番外1：修改input输入框鼠标点击时边框变色效果

    select:focus,
    input:focus {
        outline: none;     /* 清除点击时默认的蓝色焦点框 */  
        border-style: solid;
        border-color: #ff6600;
        box-shadow: 0 0 15px #ff6600;
    }  

---

番外2：修改输入框placeholder文字样式(颜色,大小,位置)

WechatIMG247.jpeg

备注：

::-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;
}