form 表单 跟 CSS样式

form 表单

form表单提交数据的几个注意事项：

1.所有获取用户输入的标签都必须在form表单里面

2.action控制着往哪儿提交

3.input\select\textarea 都需要有name属性

4.提交按钮<input type="submit">

input 系列的type属性

text     文本框

password 密码框

radio 单选框

checkbox 复选框

date 日期

file 文件（可以上传图片）

button 普通按钮，多用JS给它绑定事件

reset 重置按钮

submit 提交按钮

textarea 大段文本

<form action="#">
    <p>用户名：<input name='username' type="text" maxlength="12" placeholder="请输入用户名"></p>
    <p>密码：<input name="password" type="password"></p>
    <p>性别：
        <label for="g1">男</label>
        <input id="g1" type="radio" name="gander" value="1">
        <label for="g2">女</label>
        <input id="g2" type="radio" name="gander" value="0">
    </p>
    <p>爱好：
        <label><input type="checkbox" name="hobby" value="zq">足球</label>
        <label><input type="checkbox" name="hobby" value="lq">篮球</label>
        <label ><input type="checkbox" name="hobby" value="ssq">双色球</label>
    </p>
    <p>
        生日：<input name="brithday" type="date">
    </p>
    <p><input type="file" name="lp"></p>
    <p><textarea name="text" id="" cols="30" rows="10"></textarea></p>

    <p><input type="submit" value="登录"></p>
    <p><input type="reset" value="重置"></p>
    <p><input type="button" value="登录"></p>
</form>

select 下拉菜单

option 具体下拉选项

optgroup 分组的下拉框

<form action="#">
<select name="from" id="">
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="nj">南京</option>
    </select>

    <select name="from2" id="">
        <optgroup label="上海">
            <option value="ja">静安</option>
            <option value="mh">闵行</option>
            <option value="pt">普陀</option>
        </optgroup>
        <optgroup label="北京">
            <option value="cy">朝阳</option>
            <option value="ft">丰台</option>
            <option value="cp">昌平</option>
        </optgroup>
    </select>
<form>

 CSS查找标签的方式(选择器)

            1. 基本选择器
                1. 标签选择器     适用于 批量的\统一\默认的样式
                2. ID选择器       适用于 给特定标签设置特定样式
                3. 类选择器       适用于 给某一些标签设置相同的样式
            2. 通用选择器
                1. * 
                
            3. 组合选择器
                1. 后代选择器
                2. 儿子选择器
                3. 毗邻选择器
                4. 弟弟选择器
            
            4. 属性选择器
                1. [s9]
                2. [s9="hao"]
            
            5. 分组和嵌套
                1. div,p
                2. #d1>p
    
        --> 样式文件优先级
            1. 内联样式(直接在标签里面写style) 优先级最高
            2.选择器都一样的情况下,谁靠近标签谁就生效
            3. 选择器不同时 计算权重来判断