HTML5的学习之表单元素
这篇博客我们继续对HTML5进行学习,主要讲解HTML5的表单元素相关的内容。
1.input元素新增的类型
| type类型 | 描述 |
| color | 选色板 |
| month | 月份 |
| week | 周 |
| date | 日期 |
| datetime | 多数不兼容 |
| datetime-local | 日期加时间 |
| time | 时间 |
| 检测邮箱地址 | |
| number | 数字 |
| range | 范围 调节音量 进度条 |
| search | 搜索 |
| tel | 电话 不支持 |
| url | 地址 检测 |
HTML代码：
<form><inputtype="text"autofocusplaceholder="请输入内容"required><br><inputtype="password"size="50"><br><inputtype="checkbox"name=""id=""><br><inputtype="radio"name=""id=""><br><inputtype="button"value="按钮"><br><hr><divid="box"></div> color:<inputtype="color"name=""id="color"><br> month:<inputtype="month"name=""id="month"><br> week:<inputtype="week"name=""id="week"><br> date:<inputtype="date"name=""id="date"><br> datetime:<inputtype="datetime"name=""id="datetime"><br> datetime-local:<inputtype="datetime-local"name=""id="datetime_local"><br> time:<inputtype="time"name=""id="time"><br> email:<inputtype="email"name=""id="email"><br> range:<inputtype="range"name=""id="range"min="-50"max="50"step="5"><br> search:<inputtype="search"name=""id="search"min="-50"max="50"step="5"><br> url:<inputtype="url"name=""id="url"><br><inputtype="submit"></form>
js代码：
function$el(el){ returndocument.getElementById(el) } varoColor=$el("color"); varoBox=$el("box"); varoDate=$el("date"); varoTime=$el("datetime_local"); varoMonth=$el("month"); varoTime2=$el("time"); varoRange=$el("range"); varoSearch=$el("search"); varoWeek=$el("week"); oColor.onchange=function(){ // console.log(this.value);oBox.style.backgroundColor=this.value; } oDate.onchange=function(){ console.log(this.value); } oTime.onchange=function(){ console.log(this.value); } oMonth.onchange=function(){ console.log(this.value); } oTime2.onchange=function(){ console.log(this.value); } oRange.onchange=function(){ console.log(this.value); } oWeek.onchange=function(){ console.log(this.value); }
2.新增的属性
| 属性 | 值 | 描述 |
| autocomplete | on/off | 规定是否启用表单的自动完成功能。 针对form标签 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证。 针对form标签 |
| autocomplete | on/off | autocomplete 属性规定 元素输入字段是否应该启用自动完成功能。 |
| autofocus | autofocus | 属性规定当页面加载时 元素应该自动获得焦点。 |
| form | form_id | form 属性规定 元素所属的一个或多个表单。 |
| formaction | URL | 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | 属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。 |
| formmethod | get/post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”) |
| formnovalidate | formnovalidate | formnovalidate 属性覆盖 元素的 novalidate 属性。 |
| formtarget | _blank _self _parent _top framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”) |
| height | pixels | 规定 元素的高度。(只针对type=“image”) |
| width | pixels | width 属性规定 元素的宽度。 (只针对type=“image”) |
| list | datalist_id | 属性引用 元素，其中包含 元素的预定义选项。 |
| max | number date | 属性规定 元素的最大值。 |
| min | number date | 属性规定 元素的最小值。 |
| multiple | multiple | 属性规定允许用户输入到 元素的多个值。 |
| pattern | regexp | pattern属性规定用于验证 元素的值的正则表达式。 |
| placeholder | text | placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。 |
| required | required | 属性规定必需在提交表单之前填写输入字段。 |
| step | number | step 属性规定 元素的合法数字间隔。 |
3.HTML5新增的表单元素
| 标签 | 描述 |
| 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 | |
| 标签规定用于表单的密钥对生成器字段。 | |
| 标签定义不同类型的输出，比如脚本的输出。 |
HTML代码：
<formaction=""><selectname=""id=""><optionvalue="">汽车</option><optionvalue="">飞机</option><optionvalue="">大炮</option></select><inputtype="text"autocomplete="true"><inputlist="list1"><datalistid="list1"><optionvalue="汽车"></option><optionvalue="飞机"></option><optionvalue="大炮"></option></datalist></form><formoninput="sum.value=Number(num1.value)+Number(num2.value)"><inputtype="number"name=""id="num1"> +
视频讲解链接：
https://www.bilibili.com/video/BV1gf4y1m7No/
https://www.bilibili.com/video/BV1V54y1B73d/
