HTML5（李炎恢）学习笔记五 ------------- HTML5元素（下）

一、表单元素

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

1、表单元素总汇

2、表单元素解析

1.<form>定义表单

<form method="post" action="http://www.haosou.com/">
  <button>提交</button>
</form>

解释：<form>元素主要是定义本身是一组表单。

//使用 get 提交数据
method="get"
//丧失自动提示功能
autocomplete="off"
//使用_blank 新建目标 target="_blank"

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

<input name="user">

扫描二维码关注公众号，回复： 11114370 查看本文章

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

//聚焦光标
<input name="user" autofocus>

//禁用 input
<input name="user" disabled>

//禁止自动完成
<input name="user" autocomplete="off">

  //表单外的input
  <form method="get" id="register">
  ...
  </form>

<input name="email" form="register">

3.<label>添加说明标签

<p>
  <label for="user">用户名：<input id="user" name="user"></label>
</p>

解释：<label>元素可以关联input，让用户体验更好。且更加容易设置CSS样式。
4.<fieldset>对表单进行编组

<fieldset>...</fieldset>（这里的代码需要重新粘贴，需要体现下边的属性）

解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。

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

<fieldset>
  <legend>注册表单</legend>
</fieldset>

解释：<legend>元素给分组加上一个标题。
6.<button>添加按钮

<button type="submit"></button>

解释：<button>元素添加一个按钮，type属性有如下几个值：

//提交表单
<button type="submit">提交</button>
//重置表单
<button type="reset">重置</button>
//普通按钮
<button type="button">按钮</button>

对于type属性为submit时，按钮还会提供额外的属性。

//表单外关联提交
<button type="submit" form="register">提交</button>

二、input元素的type属性

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

1、type属性总汇

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

2、input元素属性解析

1.type为text值时

<input type="text">	

解释：当type值为text时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。

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

//设置文本框长度
<input type="text" size="50">

//设置文本框输入字符长度
<input type="text" maxlength="10">

//设置文本框的初始值
<input type="text" value="初始值">

//设置文本框输入提示
<input type="text" placeholder="请输入内容">

//设置文本提供的建议值
<input list="footlist">
<datalist id="footlist">
	<option value="苹果">苹果</option>
	<option value="桔子">桔子</option>
	<option value="香蕉" label="香蕉">
	<option value="梨子">
</datalist>

//设置文本框内容为只读，可以提交数据
<input type="text" readonly>

//设置文本框内容不可用，不可以提交数据
<input type="text" disabled>

2.type为password值时

<input type="password">

解释：当type值为password时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性。

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

3.type为search时

<input type="search">

解释：和文本框一致，在除Firefox浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和text一致。
4.type为number、range时

<input type="number">

<input type="range">

解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本框，只是样式是拖动式。额外属性如下：

//范围和步长
<input type="number" step="2" min="10" max="100">

5.type为date系列时

<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">

解释：实现文本框可以获取日期和时间的值，在获取日期和时间，目前还是推荐使用jQuery等前端库来实现日历功能。额外属性和number一致。
6.type为color时

<input type="color">

解释：实现文本框获取颜色的功能。
7.type为checkbox、radio时

音乐 <input type="checkbox">

体育 <input type="checkbox">

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女

解释：生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下：

//默认勾选，默认值为1
<input type="checkbox" name="music" checked value="1">

8.type为submit、reset和button时

<input type="submit">

解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。

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

9.type为image时

<input type="image" src="img.png">

解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。

10.type为email、tel、url时

<input type="email">
<input type="tel">
<input type="url">

解释：email为电子邮件格式、tel为电话格式、url为网址格式。额外属性和text一致。
11.type为hidden时

<input type="hidden">

解释：生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。
12.type为file时

<input type="file">

解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：

accept="image/gif, image/jpeg, image/png"

三、其他元素

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

1、元素总汇

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

2、元素解析

1.生成下拉列表

<select name="fruit">
	<option value="1">苹果</option>
	<option value="2">橘子</option>
	<option value="3">香蕉</option>
</select>

解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。

//设置高度并实现多选
<select name="fruit" size="30" multiple>

//默认首选
<option value="2" selected>橘子</option>

//使用optgroup进行分组，label为分组名称，disabled可以禁用分组		
<optgroup label="水果类">
	<option value="1">苹果</option>
	<option value="2" selected>橘子</option>
	<option value="3" label="香蕉">香蕉</option>
</optgroup>

2.多行文本框

<textarea name="content">请留下您的建议！ </textarea>

解释：生成一个可变更大小的多行文本框。属性如下：

//设置行高和列宽，设置插入换行符
<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

3.计算结果

<form οninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
	<input type="number" id="num1"> x <input type="number" id="num2">
	<output for="num1 num2" name="res">
</form>

解释：output就是计算两个文本框之间的值，其实就是内嵌了JavaScript功能。

3、输入验证

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

//必须填写一个值
<input type="text" required>

//限定在某一个范围内
<input type="number" min="10" max="100">

//使用正则表达式
<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">

//禁止表单验证
<form action="http://li.cc" novalidate>