表单及相关标签和属性笔记总结

表单作用

收集用户的信息

表单组成

1. 表单域： <form name="" method="get/post" action=""></form>
2. 表单控件 ： <input type="text" value=""/>
3. 提示信息

相关标签和属性

<fieldset></fieldset>

fieldset表单字段集，相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象

<legend></legend>

字段级标题

二者可做如下效果：

 

<label for="box"></label>

 label 提示信息标签  for="绑定控件id名"

input框的type属性相关属性值

 邮箱：<input type="email"><br>

 <!-- 最小值：min 最大值：max 每次增量：step -->

购物车数量：<input type="number" min="0" max="30" step="2"><br>

 颜色：<input type="color"><br>

范围： <input type="range"><br>

 网址：<input type="url"><br>

 <!-- 可以做到局部清除 -->

搜索框：<input type="search"><br>

日历，年月日：<input type="date"><br>

年周：<input type="week"><br>

年月<input type="month"><br>

 时分：<input type="time"><br>

年月日时分：<input type="datetime-local"><br>

<!-- datetime不常用 -->

<!-- required:输入验证不能为空

            placeholde:提示信息 

            autofocus:自动获取焦点

            autocomplete与name属性连用

            maxlenght:输入内容的最大长度

-->

            <!-- 标签：

                <output>：输出是

                <datalist></datalist> ：在autocomplete为on的时候显示的提示的之前输过的内容   

            -->

相关属性设置的例子：

 <input type="text"><br>
        <!-- 单选框 -->
        请输入你的性别：<br>
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex">不详<br>
        <!-- 复选框 -->
        请输入你的兴趣：<br>
        <input type="checkbox">running<br>
        <input type="checkbox">dancing<br>
        <input type="checkbox">singing<br>
        <input type="checkbox">reading<br>
        <input type="submit">
        <!-- 上传文件 multiple多文件上传-->
        <input type="file" multiple><br>
        <!-- 如何获取焦点值，清除焦点样式，设置样式 -->
        <input type="text" class="text"><br>
        <input type="button" value="我是按钮" class="button"><br>
        <!-- 制作下拉菜单的箭头样式 -->
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <!-- css操作复选框样式 --><br>
        <input type="checkbox" class="checkbox">小李
        <input type="checkbox" class="checkbox">小黄
        <input type="checkbox" class="checkbox">小绿<br>
        <!-- 给边框线中间加文字 -->
        <fieldset>
            <legend>我夹在线里面了</legend>
            <input type="text" class="text_t" id="name"><label for="name">姓名</label>
        </fieldset>

 CSS样式：

 .text {
            border: 1px solid green;
            width: 200px;
            height: 100px;
        }

        .text:focus {
            /* 清除焦点样式 */
            outline: none;
            border: 1px solid blue;
        }

        .button {
            width: 200px;
            height: 100px;
            border: 2px solid yellowgreen;
        }

        select {
            /* 清除下拉菜单的样式 */
            appearance: none;
            background: url("img/箭头.png") no-repeat right center;
            /* 填充，扩大文字和边框距离 */
            padding-right: 50px;
            background-size: 14px 14px;
        }

        .checkbox {
            appearance: none;
            width: 14px;
            height: 14px;
            line-height: 14px;
            color: red;
            border: 1px solid green;

        }

        .checkbox:checked {
            color: green;
            background-color: honeydew;
        }

        .checkbox:after {
            content: "❤";
        }

        fieldset{
            border: none;
            border-top: 1px solid green;
            width: 300px;
            margin-left: 50px;
        }