HTML知识-Form

<form action="">
        姓名:<input type="text" name="name" readonly value="dd"><br> age:
        <input type="text" name="age" value="18"><br>
        <input type="password" name="password" id=""><br>爱好:足球：
        <input type="checkbox" name="hobby" id="" value="1" checked>羽毛球：
        <input type="checkbox" name="hobby" id="" value="2">篮球：
        <input type="checkbox" name="hobby" id="" value="3"><br>性别：男
        <input type="radio" name="sex" id="" value="1" checked>女
        <input type="radio" name="sex" id="" value="0"><br>喜欢谁:迪丽热巴
        <input type="radio" name="sex1" id="" value="1">古力娜扎
        <input type="radio" name="sex1" id="" value="0"><br>
        <input type="file" name="" id="">
        <input type="image" src="../demo/images/1.2.webp" alt="" width="200px">
        <input type="submit" value="提交">
</form>

button按钮

disabled:指是否禁用此按钮。该属性值只能为disabled，或省略属性值。

name:指定按钮的唯一名称。该属性值应该与id属性值保持一致。

type:指定按钮属于那种按钮，该属性值只能是button、reset或submit其中之一。

ps：button与input生成按钮的区别：button是有开始，结束标签的，所以按钮的文字需要写到开始和结束标签之间；input是空标签，按钮的文字，是通过value属性来设置的。

button不设置type属性时，type属性的值默认是submit，天生具有表单提交的能力。

下拉框与列表框select

1.下拉框与列表框如何形成请求参数

<select></select>元素用于创建列表框或下拉菜单,该元素必须和<option></option>元素结合使用，每个<option></option>元素代表一个列表或菜单项。

<select></select>元素本身并不指定value属性，列表框或下拉菜单控件对应的参数值由<option></option>元素生成。

2.列表框相关属性

multiple:设置该列表框和下拉菜单是否允许多选。该属性是支持boolean值的属性，即表示允许多选。一旦设置允许多选，<select></select>元素就会自动生成列表框。

size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，<select></select>元素就会自动生成列表框。

3.option与optgroup元素及相关属性

<option></option>：用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本。

<optgroup></optgroup>：用于定义列表项或菜单项组。该元素里只能包含<option></option>子元素，处于<optgroup></optgroup>里的<option></option>就属于该组。

<option></option>元素可以指定id、style、class等核心属性，还可以指定onclick等

disabled：指定禁用该选项，属性值只能为disabled。

selected：指定该列表项初始状态是否为被选中状态。该属性值只能为selected。

value：指定该选项对应请求参数值。

<optgroup></optgroup>元素可以指定id、style、class等核心属性，还可以指定onclick等

label：指定该选项组的标签。必填。

disabled：设置禁用该选项组里的所有选项，属性值只能为disabled或省略。

<form action=" ">
        <select name=" " id=" " size="3" multiple="boolean"
            onchange="window.open(this.options[this.selectedIndex].value) ">
            <!-- size="3"显示三个列表项  selected在谁身上一进页面默认选中 -->
            <option>百度1</option>
            <option>河大1</option>
            <option>百度2</option>
            <option>河大2</option>
            <optgroup label="1.2 ">
                <option>百度3</option>
                <option selected>河大3</option>
                <option>百度4</option>
            </optgroup>

        </select>

    </form>

文本域textarea

<textarea></textarea>元素用于生成多行文本域，可以指定id、style、class、等核心属性，还可以指定onclick等事件属性。由于<textarea></textarea>的特殊，它可以接收用户输入，用户可以选中文本域内的文本，所以还可以指定onselect、onchange两个属性，分别用于响应文本域内文本被选中、文本被修改事件。

cols：指定文本域宽度，该属性必填。

rows：指定文本域高度，该属性必填。

ps：textarea控件如果要设置默认值，需要在textarea开始和结束标签之间设置，不能通过value属性；但是，如果需要使用JavaScript获取textarea的内容时，需要使用value属性。

fieldset与legend

给表单控件样式上的分组。

 <form action="">
        <fieldset name="">
            <legend>基本信息</legend>
            姓名:<input type="text" name="name" readonly value="dd"><br> age:
            <input type="text" name="age" value="18"><br>
            <input type="password" name="password" id="">
        </fieldset>
        <fieldset>
            <legend>爱好</legend>足球：
            <input type="checkbox" name="hobby" id="" value="1" checked>羽毛球：
            <input type="checkbox" name="hobby" id="" value="2">篮球：
            <input type="checkbox" name="hobby" id="" value="3">
        </fieldset>
        <fieldset>
            <legend>性别</legend>男
            <input type="radio" name="sex" id="" value="1" checked>女
            <input type="radio" name="sex" id="" value="0">
        </fieldset>
        <fieldset>
            <legend>附加</legend>喜欢谁:迪丽热巴
            <input type="radio" name="sex1" id="" value="1">古力娜扎
            <input type="radio" name="sex1" id="" value="0"><br>
            <input type="file" name="" id="">
            <input type="image" src="../demo/images/1.2.webp" alt="" width="200px">
        </fieldset>
        <input type="submit" value="提交">
    </form>

HTML5新增的常用表单属性

autofocus属性

非常常用的属性。当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获得焦点。

由于打开页面时只能有一个控件获得焦点，因此整个页面上最多只能有一个表单控件可设置该属性。

placeholder属性

也非常实用。在一些用户界面足够人性化的页面里，当用户还未在单行文本框、多行文本域输入内容时,单行文本框、多行文本域内显示对用户的提示信息。一旦用户开始输入单行文本框、多行文本域的提示信息就会消失。

<form action="" method="post">
        <input type="text" name="name" placeholder="请输入用户名"><br>
        <input type="password" name="name" placeholder="请输入密码"><br>
        <input type="submit" value="注册" formaction="regist">
        <input type="submit" value="修改" formaction="login">
</form>

list属性

该属性非常实用。在HTML 5规范以前，HTML表单控件没有类似于ComboBox的组件(相当于文本框与下拉菜单结合的组件，该组件既允许用户输入，也允许用户通过下拉菜单进行选择)。HTML 5的 list属性弥补了这个不足，list 属性的值应该是一个<datalist.../>组件的id。也就是说，list属性必须与<datalist.../>元素结合使用。
<datalist.../>元素相当于一个“看不见”的<select.../>元素，用于生成一个隐藏的下拉菜单。<datalist.../>所能包含的子元素与<select.../>元素完全相同。该元素用于与指定了list属性的<input..>元素结合使用。当双击指定了 list属性的文本框时，该文本框将会显示<datalist.../>生成的下拉菜单。
下面页面代码示范了list属性与<datalist.../>元素的用法。

list的值与datalist的id对应。

<input type="text" list="zx"><input type="submit" value="提交">
    <datalist id="zx">
        <option value="史诗"></option>
        <option value="神话"></option>
        <option value="传说"></option>
    </datalist>

autocomplete属性

该属性用于设置表单是否支持自动完成功能，如果启用自动完成功能，浏览器将会根据用户上次提交的数据生成列表框供用户选择，或提示自动完成。
该属性支持如下两个属性值。
on:打开autocomplete，文本框下方会显示下拉菜单。

off:关闭autocomplete，文本框下方不会显示下拉菜单。

HTML5新增的常用表单元素

新增的input控件

<form action="">
        type="color"的文本框：<input type="color" name="color"> <br>type="date"的文本框：
        <input type="date" name="date"> <br>type="time"的文本框：
        <input type="time" name="time"><br> type="datetime-local"的文本框：
        <input type="datetime-local" name="datetime-local"><br> type="month"的文本框：
        <input type="month" name="month"><br> type="week"的文本框：
        <input type="week" name="week"> <br>type="email"的文本框：
        <input type="email" name="email" multiple> <br>type="tel"的文本框：
        <input type="tel" name="tel"><br> type="url"的文本框：
        <input type="url" name="url"><br> type="number"的文本框：
        <input type="number" name="number" min="0" max="100" step="5"><br> type="range"的文本框：
        <input type="range" name="range" min="0" max="100" step="5"><br> type="search"的文本框：
        <input type="search" name="search"><br>
        <input type="submit" value="提交">

    </form>

meter控件

value:指定计数仪表的当前值。默认为0，可以为该属性指定一个浮点小数值。

min:指定计数仪表的最小值。默认为0，可以为该属性指定一个浮点小数值。

max:指定计数仪表的最大值。默认为1，可以为该属性指定一个浮点小数值。

low:指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值。

high:指定计数仪表指定范围的最大值。该属性值必须小于等于max属性指定的值。

<form action="">
        <meter value="120" min="10" max="200" low="30" high="160">120</meter>千米/小时
        <!-- 注意：meter是开始和结束标签，不是空标签。 -->
</form>

progress控件

<progress></progress>元素用于表示一个进度条。使用该元素时除了可指定id，style，class，hidden等通用属性之外，还可指定如下属性。

max：指定进度条完成时的值。

value：指定进度条当前完成的进度值。

<form action="">
        <progress max="100" value="30"></progress>
        <!-- 注意：progress是开始和结束标签，不是空标签。 -->
</form>

html5表单验证（提高前端验证）

基本表单验证（属性验证）

required:该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值

pattern:该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式。

min、max、step:3个属性只对数值类型、日期类型的input元素有效,这3个属性控制该表单控件的值必须在min~max之间，并符合step步长。

<form action="#">
        <input type="text" required name="xx"><br>
        <input type="text" required name="book" pattern="\d{3}-\d-\d{3}-\d{5}"><br>
        <input type="number" name="box" min="0" max="100" step="5" required><br>
        <input type="submit">
</form>

媒体相关html元素知识

audio音频

<audio src="1.mp3" controls autoplay></audio>

src:指定播放音频、视频的URL地址。

autoplay:该属性是支持boolean值的属性。如果将该属性设为truc，当音频、视频装载完成后会自动播放。

controls:该属性是支持boolean值的属性。如果将该属性设为truc，当音频、视频装载完成后会自动播放。

loop:该属性是支持 boolean值的属性。如果将该属性设为 true，音频、视频播放完成后会再次重复播放。

preload:该属性指定是否预加载音频、视频，该属性支持如下几个属性值:

auto，预加载音频、视频。

metadata，只预加载音频、视频的元数据，如媒体字节数、第一帧、播放列表、持续时间等none，不执行预加载。

如果指定了autoplay属性,preload 属性将会被忽略。

poster:该属性只对video元素有效，该属性指定一张图片的URL地址。在视频下载完成、开始播放之前，该元素将会显示该属性所指定的图片。当视频不可用时也将显示这张图片。

width:该属性只对video元素有效，指定视频播放器的宽度。

height:该属性只对video元素有效，指定视频播放器的高度。

video视频

<video src="1.mp4" controls height="500px" width="500px" autoplay></video>