HTML5中表单与文件一些学习笔记-百分百源码网

HTML5中表单与文件一些学习笔记

发布时间：01/15 来源：浏览：关键词：

文章介绍HTML5中表单与文件一些学习笔记，希望这些对各位学习html5有所帮助。

Web应用程序的过程中，表单是页面上非常重要的一块内容，用户可以输入的大

部分内容都是在表单的元素中完成的，它与后台的交互在大多数情况下也是通过点击表单中

的按钮来完成的。在HTML 5 中，大大加强了有关于表单这一部分的功能。本章将详细介绍在HTML 5 中新增的表单元素、属性，以及对表单元素内容的有效性进行验证的功能，同时也会介绍在HTML 5的页面上，除了表单元素之外、其他的新增与改良的元素，最后会介绍在HTML 5中新增的与表单元素相关的两个API-文件API和拖放API.

学习内容：

掌握HTML 5中新增的表单中元素可以使用的属性及它们的使用方法。

掌握HTML 5 中新增的表单元素及它们的使用方法。

掌握HTML 5中新增的关于表单内元素内容的有效性的验证方法，包括属性验证、显式验证、取消验证，以及自定义验证信息。

掌握HTML5 中除了表单以外，在页面上新增及改良的元素，以及它们的使用方曲。

掌握文件API包括掌握File对象与FileList对象的使用方法，掌握Blob对象的概念和

使用方法，掌握FileReader对象以及它的方怯、事件定义、事件触发条件，以及事件

发生的先后顺序。

掌握怎样利用拖放API使页面中的元素可以互相拖放，掌握DataTransfer对象的属性和

方法，掌握怎样设定拖放时的视觉效果，以及怎样自定义拖放图标。

-新增元素与属性

form、formaction、formmethod、placeholder（处于未输入状态时文本框显示的输入提示）、autofocus（自动获取光标焦点）、
list（该属性的值为某个datalist元素的id),类似选择框。
text：<input type="text" name="greeting" list="greetings">

代码如下
<!--使用style="display:none;"将detalist元素设定为不显示--> <datalist id="greetings" style="display: none;"> <option value="Good Morning">Good Morning</option> <option value="Hello">Hello</option> <option value="Good Afternoon">Good Afternoon</option> </datalist>

autocomplete（On、Off、“”三个值）
-增加Input元素的种类

search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color、file。

- 表单验证

required、pattern（pattern=“^w.*$”）、min、max、step（元素值增加或减少的步幅）

取消验证的方法：1、form元素的novalidate属性为true。2、input元素的formnovalidate属性

-增强的页面元素

figure：网页上一块独立的内容，figcaption表示figure的标题

details:局部区域进行展开或收缩，通过点击summary元素的内容来控制

mark：高亮显示内容

progress：代表一个任务的完成进度

meter：规定范围内的数量值（max、min、low下限、high上限、optimum最佳值

下面我们一起来看一些实例

一.新增属性

1.form元素可以把表单内的从属元素书写在页面上的任何地方。

代码如下
<form id="testform"> <input type="text" /> </form> <textarea form="testform"></textarea>

2.formaction属性，可以使不同的按钮，将表单提交到不同的页面

代码如下
<form id="testform" action="serve.php"> <input type="submit" name="s1" value="v1" formaction="s1.jsp"/>提交到s1 <input type="submit" name="s2" value="v2" formaction="s1.jsp"/>提交到s2 <input type="submit" name="s3" value="v3" formaction="s1.jsp"/>提交到s3 </form>

注：目前还没有浏览器支持这一属性

3.formmethod

代码如下
<form id="testform" action="serve.php"> <input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post"/>提交到s1 <input type="submit" name="s2" value="v2" formaction="s1.jsp" formmrthod="get"/>提交到s2 </form>

4.placeholder属性是指当文本框（input type=”text” ）处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。

代码如下
<input type="text" placeholder="input me"/>

5.autofocus属性，让控件自动获取光标焦点

代码如下
<input type="text" autofocus/>

6.datalist该元素类似于select，但当用户想要设定的值不在选择列表之内时，允许其自行输入。

代码如下
<datalist id="greetings"> <option value="Good Morning">Good Morning</option> <option value="Hello">Hello</option> </datalist>

7.pattern属性，用来匹配某个元素的正则表达式，require表示空白时不能提交

代码如下
<form method="post"> <input name="text" type="text" required pattern="^w.*$"/> </form>

二.自定义错误类型

代码如下

2.figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响

代码如下
<figure> <img src="ty1.jpg" alt="谭咏麟"> <figcaption>谭咏麟</figcaption> </figure>

figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。

3.details元素提供了一种替代javascript的，将画面上局部区域进行展开或收缩的方法，不过现在还没有任何浏览器对它提供支持。

代码如下
<details> <summary>精武风云</summary> <p>陈真当年为报杀师之仇，独闯虹口道场....</p> </details>

4.progress表示一个任务的完成度.

代码如下

<section>
                 <h2>progress元素的使用示例</h2>
                 <p>完成百分比:<progress id="p" max="100"><span>0</span>%</progress></p>
                 <input onclick="button_onclick()" value="请点击" type="button">
</section>
var progressBar=document.getElementById("p");
             function button_onclick()
             {
                 var progressBar=document.getElementById('p');
                 progressBar.getElementsByTagName('span')[0].textContent="0";
                 for(var i=0;i<=100;i++)
                 updateProgress(i);
             }
             function updateProgress (newValue) {
                 var progressBar=document.getElementById('p');
                 progressBar.value=newValue;
                 progressBar.getElementsByTagName('span')[0].textContent=newValue;

                             }