HTML5元素（下）

一、表单元素

表单元素用于获取用户的输入数据

1、表单元素总汇


2、表单元素解析

1.<form>定义表单

[java] view plain copy
  1. <form method="post" action="http://www.haosou.com/">  
  2.   <button>提交</button>  
  3. </form>  
解释：<form>元素主要是定义本身是一组表单。

[java] view plain copy
  1. //使用 get 提交数据  
  2. method="get"  
  3. //丧失自动提示功能  
  4. autocomplete="off"  
  5. //使用_blank 新建目标 target="_blank"  

2.<input>表示用户输入数据

[java] view plain copy
  1. <input name="user">  

解释：<input>元素默认情况会出现一个单行文本框，有五个属性。


[java] view plain copy
  1. //聚焦光标  
  2. <input name="user" autofocus>  
  3.   
  4. //禁用 input  
  5. <input name="user" disabled>  
  6.   
  7. //禁止自动完成  
  8. <input name="user" autocomplete="off">  
  9.   
  10.   //表单外的input  
  11.   <form method="get" id="register">  
  12.   ...  
  13.   </form>  
  14.   
  15. <input name="email" form="register">  

3.<label>添加说明标签
[java] view plain copy
  1. <p>  
  2.   <label for="user">用户名：<input id="user" name="user"></label>  
  3. </p>  
解释：<label>元素可以关联input，让用户体验更好。且更加容易设置CSS样式。
4.<fieldset>对表单进行编组

[java] view plain copy
  1. <fieldset>...</fieldset>（这里的代码需要重新粘贴，需要体现下边的属性）  
解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。


5.<legend>添加分组说明标签

[java] view plain copy
  1. <fieldset>  
  2.   <legend>注册表单</legend>  
  3. </fieldset>  
解释：<legend>元素给分组加上一个标题。
6.<button>添加按钮

[java] view plain copy
  1. <button type="submit"></button>  
解释：<button>元素添加一个按钮，type属性有如下几个值：

[java] view plain copy
  1. //提交表单  
  2. <button type="submit">提交</button>  
  3. //重置表单  
  4. <button type="reset">重置</button>  
  5. //普通按钮  
  6. <button type="button">按钮</button>  
对于type属性为submit时，按钮还会提供额外的属性。

[java] view plain copy
  1. //表单外关联提交  
  2. <button type="submit" form="register">提交</button>  


二、input元素的type属性

HTML5中表单中input元素的type属性，根据不同的值来显示不同的输入框。

1、type属性总汇

input元素可以用来生成一个供用户输入数据的简单文本框。
在默认的情况下，什么样的数据均可以输入。而通过不同的属性值，可以限制输入的内容。


2、input元素属性解析

1.type为text值时

[html] view plain copy
  1. <input type="text">     
解释：当type值为text时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。

并且，还提供了一些额外的属性


[html] view plain copy
  1. //设置文本框长度  
  2. <input type="text" size="50">  
  3.   
  4. //设置文本框输入字符长度  
  5. <input type="text" maxlength="10">  
  6.   
  7. //设置文本框的初始值  
  8. <input type="text" value="初始值">  
  9.   
  10. //设置文本框输入提示  
  11. <input type="text" placeholder="请输入内容">  
  12.   
  13. //设置文本提供的建议值  
  14. <input list="footlist">  
  15. <datalist id="footlist">  
  16.     <option value="苹果">苹果</option>  
  17.     <option value="桔子">桔子</option>  
  18.     <option value="香蕉" label="香蕉">  
  19.     <option value="梨子">  
  20. </datalist>  
  21.   
  22. //设置文本框内容为只读，可以提交数据  
  23. <input type="text" readonly>  
  24.   
  25. //设置文本框内容不可用，不可以提交数据  
  26. <input type="text" disabled>  
2.type为password值时
[html] view plain copy
  1. <input type="password">  
解释：当type值为password时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性。

这里除了正则和验证需要后面讲，其余和文本框一致。

3.type为search时

[html] view plain copy
  1. <input type="search">  
解释：和文本框一致，在除Firefox浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和text一致。
4.type为number、range时

[html] view plain copy
  1. <input type="number">  
  2.   
  3. <input type="range">  
解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本框，只是样式是拖动式。额外属性如下：

[html] view plain copy
  1. //范围和步长  
  2. <input type="number" step="2" min="10" max="100">  
5.type为date系列时
[html] view plain copy
  1. <input type="date">  
  2. <input type="month">  
  3. <input type="time">  
  4. <input type="week">  
  5. <input type="datetime">  
  6. <input type="datetime-local">  
解释：实现文本框可以获取日期和时间的值，在获取日期和时间，目前还是推荐使用jQuery等前端库来实现日历功能。额外属性和number一致。
6.type为color时

[html] view plain copy
  1. <input type="color">  
解释：实现文本框获取颜色的功能。
7.type为checkbox、radio时

[html] view plain copy
  1. 音乐 <input type="checkbox">  
  2.   
  3. 体育 <input type="checkbox">  
  4.   
  5. <input type="radio" name="sex" value="男">男  
  6. <input type="radio" name="sex" value="女">女  
解释：生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下：

[html] view plain copy
  1. //默认勾选，默认值为1  
  2. <input type="checkbox" name="music" checked value="1">  
8.type为submit、reset和button时
[html] view plain copy
  1. <input type="submit">  
解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。

如果是submit时，还提供了和<button>元素一样的额外属性：formaction、formenctype、formmethod、formtarget和formnovalidate。

9.type为image时

[html] view plain copy
  1. <input type="image" src="img.png">  
解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。

10.type为email、tel、url时

[html] view plain copy
  1. <input type="email">  
  2. <input type="tel">  
  3. <input type="url">  
解释：email为电子邮件格式、tel为电话格式、url为网址格式。额外属性和text一致。
11.type为hidden时

[html] view plain copy
  1. <input type="hidden">  
解释：生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。
12.type为file时

[html] view plain copy
  1. <input type="file">  
解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：

[html] view plain copy
  1. accept="image/gif, image/jpeg, image/png"  


三、其他元素

HTML5中表单中剩余的其他元素，然后重点了解一下表单的输入验证功能。

1、元素总汇

包括下拉框列表select、多行文本框textarea、和output计算结果元素


2、元素解析

1.生成下拉列表

[html] view plain copy
  1. <select name="fruit">  
  2.     <option value="1">苹果</option>  
  3.     <option value="2">橘子</option>  
  4.     <option value="3">香蕉</option>  
  5. </select>  
解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。

[html] view plain copy
  1. //设置高度并实现多选  
  2. <select name="fruit" size="30" multiple>  
  3.   
  4. //默认首选  
  5. <option value="2" selected>橘子</option>  
  6.   
  7. //使用optgroup进行分组，label为分组名称，disabled可以禁用分组        
  8. <optgroup label="水果类">  
  9.     <option value="1">苹果</option>  
  10.     <option value="2" selected>橘子</option>  
  11.     <option value="3" label="香蕉">香蕉</option>  
  12. </optgroup>  
2.多行文本框
[html] view plain copy
  1. <textarea name="content">请留下您的建议！ </textarea>  
解释：生成一个可变更大小的多行文本框。属性如下：

[html] view plain copy
  1. //设置行高和列宽，设置插入换行符  
  2. <textarea name="content" rows="20" cols="30" wrap="hard"></textarea>  
3.计算结果
[html] view plain copy
  1. <form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">  
  2.     <input type="number" id="num1"> x <input type="number" id="num2">  
  3.     <output for="num1 num2" name="res">  
  4. </form>  
解释：output就是计算两个文本框之间的值，其实就是内嵌了JavaScript功能。

3、输入验证

HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery 等前端库来实现丰富的验证功能和显示效果。

[html] view plain copy
  1. //必须填写一个值  
  2. <input type="text" required>  
  3.   
  4. //限定在某一个范围内  
  5. <input type="number" min="10" max="100">  
  6.   
  7. //使用正则表达式  
  8. <input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">  
  9.   
  10. //禁止表单验证  
  11. <form action="http://li.cc" novalidate>  
个人资料
Lily
等级：6
文章：24篇
访问：1.3w
排名： 17
推荐圈子
推荐
上一篇： HTML5元素（上）
下一篇：HTML5元素（中）
猜你感兴趣的圈子：
前端技术
标签： plain、type、copy、文本框、view、面试题
Copyright © 2014-2024 k6k4.com 版权所有

浙公网安备 33010602006230号

浙ICP备14015892号

隐藏