学习笔记-HTML5-2

HTML5中的表单：
1.form属性的改变：传统的必须要都写在form内，HTML5可以写在外面，如

<form id="login" action="login.php" method="get"></form><input form="login" type="text" name="username" value="admin"> <br><input form="login" type="submit" name="dosubmit" value="Log in"><form id="login1" action="login1.php" method="get"></form><input form="login1" type="text" name="username" value="admin"><br><input form="login1" type="submit" name="dosubmit" value="Log in">

这个分别是提交到login.php与login1.php的两个表单。
2.新增formaction与formmethod方法：
formaction是在提交按钮内重写form的action属性，
formmethod是在提交按钮内重写form的method属性，
如例题，所有按钮都在同一表单内，DOSUBMIT的提交地址不变，为login1.php,ADD的提交到add.php,提交方式为GET，DELETE的提交到delete.php，提交方式为post。

<form id="login1" action="login1.php" method="get"></form><input form="login1" type="text" name="username" value="admin"> <br><input form="login1" type="submit" name="DOSUBMIT" value="Log in"> <br><input form="login1" formaction="add.php" formmethod="get" type="submit" name="ADD" value="add"> <br><input form="login1" formaction="delete.php" formmethod="post"  type="submit" name="DELETE" value="delete"> <br>

3.新增placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
placeholder 属性适用于以下的 input 类型：text, search, url, telephone, email 以及 password。

<form id="login1" action="login1.php" method="get"></form><input form="login1" placeholder="please input value" type="text" name="username"> <br><input form="login1" type="submit" name="dosubmit" value="Log in"> <br><input form="login1" formaction="add.php" formmethod="get" type="submit" name="dosubmit" value="add"> <br><input form="login1" formaction="delete.php" formmethod="post"  type="submit" name="dosubmit" value="delete"> <br>

4.新增autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。
如果使用该属性，则 input 元素会获得焦点。

<form id="login1" action="login1.php" method="get"></form><input form="login1" autofocus type="text" name="username"> <br><input form="login1" placeholder="please input value" type="text" name="username"> <br><input form="login1" type="submit" name="dosubmit" value="Log in"> <br><input form="login1" formaction="add.php" formmethod="get" type="submit" name="dosubmit" value="add"> <br><input form="login1" formaction="delete.php" formmethod="post"  type="submit" name="dosubmit" value="delete"> <br>

autofocus是bool值true or false，一个表单内只能有一个。
5.datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist

<form id="login1" action="login1.php" method="get"></form><input form="login1" list="test" autofocus type="text" name="username"> <br><input form="login1" placeholder="please input value" type="text" name="username"> <br><input form="login1" type="submit" name="dosubmit" value="Log in"> <br><datalist id="test">    <option>one</option>    <option>two</option>    <option>three</option>    <option>four</option>    <option>five</option></datalist>

下拉列表模样，同时拥有输入提示的功能。
6.新增autocomplete 属性规定表单是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
autocomplete 属性适用于 form，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form id="login1" action="login1.php" method="get"></form><input form="login1" list="test"  autofocus autocomplete="on" type="text" name="username"> <br><input form="login1" placeholder="please input value" type="text" name="username"> <br><input form="login1" type="submit" name="dosubmit" value="Log in"> <br><datalist id="test">    <option>one</option>    <option>two</option>    <option>three</option>    <option>four</option>    <option>five</option></datalist>

autocomplete 通过 on 与 off 控制开关，可同时与list一起使用。
7.新增input功能
-search:搜索框

search：<input form="login1" type="search" name="dosubmit"> <br>

-tel:电话号码

tel：<input form="login1" type="tel" name="dosubmit" title="only 10 numbers" pattern="^\d{10}$"> <br>

这里面：pattern属性内部写的是正则表达式，用于写规则，title用于错误提示
-url:链接

url:<input form="login1" type="url" name="urltext">

注意正确链接写法是：http://xxx.xxx.xxx,且它会自动检测并提示。
-email:email

email:<input form="login1" type="email" name="emailtext"><br>

同上，它会自动检测是否含有@符号。
-required 意思是不能提交为空，required 为bool型。

url:<input form="login1" type="url" required name="urltext"><br>email:<input form="login1" type="email" required name="emailtext"><br>

-取消判断：novalidate&formnovalidate（都是bool型）
formnovalidate 属性覆盖 form 元素的 novalidate 属性。
如果使用该属性，则提交表单时按钮不会执行验证过程。
该属性适用于 form 以及以下类型的input：text, search, url, telephone, email, password, date pickers, range 以及 color。
标准写法： formnovalidate=”formnovalidate”

<input form="login1" type="submit" formnovalidate="formnovalidate" name="dosubmit2" value="Log in2"> <br>

也可formnovalidate

<input form="login1" type="submit" formnovalidate name="dosubmit2" value="Log in2"> <br>

novalidate 属性规定当提交表单时不对其进行验证。
如果使用该属性，则表单不会验证表单的输入。
novalidate 属性适用于：form，以及以下类型的 input标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
标准写法： novalidate=”novalidate”

<form id="login1" novalidate="novalidate" action="login1.php" method="get"> </form>

也可novalidate

<form id="login1" novalidate action="login1.php" method="get"> </form>

-时间

DateTime:<input form="login1" type="datetime" name="datetime"><br>Date:<input form="login1" type="date" name="date"><br>month:<input form="login1" type="month" name="month"><br>week:<input form="login1" type="week" name="week"><br>time:<input form="login1" type="time" name="time"><br>datetime-local:<input form="login1" type="datetime-local" name="datetime-local"><br>

-数字：number

number:<input form="login1" type="number" name="numbertext" value="50" min="0" max="100" step="5"><br>

控件控制最小0，最大100，每次上下调动为5，当小于10或大于100或不为5的倍数，提交时将提示错误

-滑条:range

range:<input form="login1" type="range" name="rangetext" value="50" min="0" max="100" step="5"><br>

一个滑条，最左端值为min，最右端为max，期间以5为最小单位

两者可以结合使用，如：

number:<input form="login1" id="num" onchange="range.value=value" type="number" name="numbertext" value="50" min="0" max="100" step="5"><input id="range" onchange="num.value=value" type="range" value="50" min="0" max="100" step="5"><br>

其中onchange属性意为：改变后，“xx.value=value”,等号右边赋值给等号左边，右边为本身的值，左边为另外一个ID的值。在这里先通过文本框的值去改变滑条，后一个是为改变滑条带动文本框内的值改变。

-颜色：Color

color:<input form="login1" onchange="opcolornum.value=value" type="color" name="colorbox"><output id="opcolornum">0</output><br>

颜色，点击后出现调色盘，选择后可知选择的颜色的值，提交后也是提交颜色的值。

-文件：file（写法与HTML4相同，但是可添加multiple属性（bool型），变为操作多个文件）

file：<input form="login1" multiple type="file" name="filebox"><br>

-accept 属性只能与 input type=”file”配合使用。它规定能够通过文件上传进行提交的文件类型。

file：<input form="login1" multiple type="file" ：accept="image/*" name="filebox"><br>

8.新增output方法，作用就是输出

range:<input form="login1" onchange="rangenum.value=value" type="range" name="rangetext" value="50" min="0" max="100" step="5"><output id="rangenum">50</output><br>

这里是为滑块显示值。当滑块移动后，输出的值会跟着改变。