关于form的那些事儿

 form标签的属性：

     action:提交的地址（DBA数据源提供）

     method:提交方式

             get  （默认值）会把用户输入的内容展示到地址栏

             post    地址栏不会显示用户输入的内容

 

     子元素input是一个自闭合元素

     input标签的类型取决于type取值

     text：单行文本输入框

     password:密码输入框

     radio：单选框

     checkbox:多选框

     

     由于用户的操作行为不同，导致不是所有人都会点击输入框

     也可能会点击相应的文字

     为了使文字与输入框相关联，添加label标签

 

     如何关联：

     label的for属性值与input的id值相同，则成功关联

 

     适用场景：

     注册、登录页面

     提交、搜索功能

     <section>
            <label for="1">用户名</label>
            <span>*</span>
            <input type="text" id="1" name="username" value="123" placeholder="请使用手机号或邮箱" required>
            

 当前案例下

                 添加id属性，是为了与label关联

                 添加name属性是为了给当前这个输入的值一个名字

                 便于后期储存

 

                注册会员    会员名单（没有你）

                F68          用户名：F68

                123           密码：123

                注：要在input添加一个name属性

                为了告诉接受者，每个值代表含义

 

                取得名字          用户输入的值

                username   =      用户名：F68

                pwd        =        123

 

                取得名字，叫键名

                用户名输入的值，叫键值

 

                键值对（键和值是成对出现）

 

                class="box"

                class属性名

                box属性值

文本输入框的默认值

          value属性名和其值，会提交上去，但是用户要先删除提示信息再进行编辑

          placeholder代表提示信息，不会提交上去

                        当用户输入文本后，会消失

        

        输入框中的placeholader和value的区别？

         1、placeholader默认颜色是灰色，value默认值是字体颜色

         2、当用户输入文本后

            placeholder内容会消失

            value内容不会消失

 

            required代表必填项，如果提交时，没有进行选取或输入，会提示用户输入内容

密码框提示文字变色

input::-webkit-input-placeholder{
    color:rgb(65, 236, 107);
}

       <section>
            <label for="2">密码</label>
            <span>*</span>
            <input type="password" id="2" name="pwd" required>
            <span>密码强度：</span>
            <span>若</span>
            <span>中</span>
            <span>强</span>
        </section>

        <section>
            <label for="3">确认密码</label>
            <span>*</span>
            <input type="password" id="3"  name="confirm">
            <span>请确认密码</span>
        </section>

 

 单选框 

        type的属性值为radio,是实现单选框的样式

        name属性值相同，是实现单选框的功能,,,,,,,不加name只有单选框的样式，没有单选框的功能

        由于键值是用户选择的，不是用户输入的，

        因此，要在input里添加一个value属性名和属性值

 单选框默认值的设定

                添加checked属性即可

当属性名与属性值相同时，可以只写属性名，依然可达到其效果

            性别：
            <input type="radio" name="gender" id="nan" value="male" checked="checked">
            <label for="nan">男</label>
            <input type="radio" name="gender" id="nv" value="female">
            <label for="nv">女</label>

 

 

多选框 

        type的属性值为checkbox,是实现单选框的样式

        name属性值相同

注：如果是用户输入的值，则只需要给键名即可。

    如果是用户选择的，则键名和键值都要给

    键名在标签中加，name=""

    键值在标签中加，value=""

        由于键值是用户选择的，不是用户输入的，

        因此，要在input里添加一个value属性名和属性值

 <label for="4">爱好：</label>

            <input type="checkbox" value="eat" id="4">吃饭
            <input type="checkbox" value="sleep" id="4" checked>睡觉
            <input type="checkbox" value="playwang" id="4">打王者

下拉列表多选功能

         step1：给select一个高度

         step2:给select一个multiple

 

        父元素是seleck

        子元素是option

name="Province"键名 

value="sc"键值

selected设置下拉列表默认值

           省份： 
            <select name="Province">
                <option value="">------</option>
                <option value="sc">四川省</option>
                <option value="jl">吉林省</option>
                <option value="sx">陕西省</option>
                <option value="cq" selected>重庆省</option>
            </select>
            城市：
            <select name="city">
                <option value="">------</option>
                <option value="CD">成都</option>
                <option value="NC">南充</option>
                <option value="DZ">达州</option>
            </select>

下拉列表的扩展

            optgroup标签给选项进行类别的划分

            label上的属性值是类别

           label是属性

           所属部分：
            <select name="Department">
                <optgroup label="市场部">
                    <option value="CD">网络部</option>
                    <option value="NC">咨询部</option>
                    <option value="DZ">外推部</option>
                </optgroup>

                <optgroup label="非市场部">
                    <option value="CD">教学部</option>
                    <option value="NC">教质部</option>
                    <option value="DZ">就业部</option>
                </optgroup>
            </select>

 按钮

    input不同type值

    type取值：

    botton  普通按钮   没有任何功能，JS用的    

    submit  提交按钮   功能：提交功能

    reset   重置按钮   功能：恢复默认值

默认显示提交，如果想修改显示内容，则添加value值 

button  为标签时，可以提交<button>注册</button>

         为属性时不可以提交

        <input type="botton" value="F68">
        <input type="submit" value="F68">
        <input type="reset">

 <section>
            请选择您喜欢的颜色
            <input type="color">
        </section>

<section>
            上传文件：
            <input type="button" value="上传文件">
            <input type="file">
        </section>

<section>
            出生日期：
            <input type="date">
        </section>

设置单行文本框输入框的长度 maxlength="11"

纯数字input type="number"

 <section>
            手机：
            <input type="number" maxlength="11" pattern="" required>
        </section>

        <section>
            体重：
            <input type="range">
        </section>

 多行文本输入框

            适用场景：留言区，评论区

              column 列

              row  行

<textarea name="" id="" cols="30" rows="10">
            1234456
        </textarea>

 下拉列表多选功能

input的list值与datalist的id要相同，即关联

         datalist是父元素

         option子元素

 成都小吃：
        <input type="text" name="snack" list="F68">
        <datalist id="F68">
            <option value="凉面">LM</option>
            <option value="钵钵鸡">BBJ</option>
            <option value="鸡脚">JJ</option>
        </datalist>

当input被激活时，轮廓变成原谅色

input:focus{
    border:1px solid rgb(37, 37, 235);
}