HTML学习日志（6月18日）

1.<input type="text" required placeholder="" value="" maxlength="">  required表单项必填，placeholder表单项说明，value表单项默认值，maxlength表单项输入最大字符数

2.<input type="text" readonly> readonly表单项只读

3.<input type="text" disabled> disabled表单项禁用（禁用表单项数据不会发送到后端）

4.<input type="hidden" value=""> 不可见表单项（必需默认值）

5.<input type="password"> 密码输入表单项（输入内容不可见）--->（表单项类型还可以设置为email，url，number等）

6.<button></button> 默认提交按钮   <button type="button"></button> 普通按钮类型（不会触发提交，可自定义点击事件）

   <input type="submit" name="" value="">（可设置name，value值，存在多个按钮时，能够获取用户具体点击按钮信息）

7.<input type="text" pattern="" function=> pattern设置正则输入格式（设置输入错误提示回调函数，回调函数的属性名oninvalid）

8.<textarea name="" id="" cols="30" rows="10">默认值</textarea> 文本域，即长文本输入框（cols行数，rows列数，默认值不使用value，直接在标签间添加）

9.选择组合

<select name="choice" id="" multiple>  选择框(multiple可多选，但是需要将name改变为数组类型，即choice[])

            <optgroup label="体育运动">  选项分组

                <option value="basketball">篮球</option>  

                <option value="football">足球</option> 

            </optgroup>

            <optgroup label="艺术活动">

                <option value="sing">唱歌</option>  根据选项，确认发送到后台的value值）

                <option value="dance" selected>跳舞</option> （selected默认选项）

            </optgroup>

        </select>

10.单选表单项

 <label>

        <input type="radio" name="sex" value="boy">  选项（不同选项的name值相同）

        男孩

    </label>

    <label>

        <input type="radio" name="sex" value="girl"  checked> checked默认选项

        女孩

    </label>

11.多选表单项

<label>

        <input type="checkbox" name="tools[]" value="hammer" checked>  多选（name值为数组类型）

        锤子

    </label>

    <label>

        <input type="checkbox" name="tools[]" value="knife">

        刀子

    </label>

 12.上传表单项

<form action="react.php" method="post" enctype="multipart/form-data">  上传文件时设置enctype值

        <input type="file"  name="image[]" accept=".png,.jpg"  multiple> 上传表单项（支持多选，同样需要设置name为数组类型。accept限制上传文件类型）

    </form>

 13.时间表单项

<form action="react.php">

        <input type="date" step="5" min="2022-06-18" max="2024-06-18" name="prac"> step步长（日），min选择起始时间，max选择截止日期

    </form>

   （时间表单项还可以设置type为time时分，month年月，week年周，datetime-local年月日时分）

14.搜索表单和DATALIST数据列表

<form action="react.php">

        <input type="search" name="search-list" list="technology"> list属性值要和datalist的id对应

        <datalist id="technology">

            <option value="JAVA">高效编程语言</option>

            <option value="CSS">控制网页样式</option>

            <option value="MYSQL">数据库管理</option>

        </datalist>

    </form> 
15.<input type="text" name="info" autocomplete="off"> autocomplete历史信息提示

16.<ol start=""></ol> 有序列表（start开始序号）

   <ul></ul> 无序列表

   <li></li> 列表项（嵌套在列表中）

17.描述列表（可组合列表项并设置单独标题）

<dl>

        <dt>中国名著</dt>  

        <dd>红楼梦</dd>

        <dd>三国演义</dd>

        <br>

        <dt>外国名著</dt>

        <dd>巴黎圣母院</dd>

        <dd>哈姆雷特</dd>

    </dl>