【HTML5】->表单元素第二节->有趣的按钮们

Ⅰ 前言

在表单元素第一节中，我讲解了关于表单创立的几个基本元素，这篇文章我会讲解几个按钮，会用到如下几个属性或者元素：type = "button",range型input元素，number型input元素，checkbox型input元素，radio型input元素，选项列表select，数据列表datalist。

Ⅱ 生成一个按钮

要生成一个按钮，有两种方法，第一个是type = "button"这个属性：

效果如下：

于是就生成了一个解压的按钮，虽然点了并没有什么用。

第二个方法是<button><button>这个元素。


也可以生成一个解压的小按钮，这两个看似是一样的，其实有很大的区别。
<button><button>是要配合JavaSE使用的，这个我可能会在很久之后的文章里才能讲到。我们先记下来，这两个是不一样的。

Ⅲ input属性讲解

A. 提交表单

这个属性也是要和别的语言一起使用的，所以不做过多的说明。我们只需要了解这个会产生一个可以提交表单到服务器的按钮。


看起来是没有什么区别的。
关于这三个元素，我提供一个结论：
使用范围和功能：button > input button > input submit

B. 滑动条

range型input元素可以生成一个滑动条。

<input type="range" min="-100" max="300" step="100">

效果如下👇

可以拖动这个小东西。不同的浏览器效果有点差别，有的浏览器可能还会显示数字。

我没有设初始值，所以指示器一开始就停在中间。若要默认从头开始滑动的话，可以设置一个value=""的初始值。

<input type="range" min="-100" max="300" step="100" value="-100">

效果如下👇

C. 数字滑动条

number型input元素可以实现将滑动条变成数字形式的。

<input type="number" min="-100" max="300" value="0">

效果如下👇

有的浏览器的效果是不一样的，后面会有上下箭头，可以通过箭头来调整数字增大或减小。
IE的属性就是手动输入的，当你输入的数字超出了我规定的范围，程序会自动将其辨认为最大数字或者最小数字。

D. 不可取消的选择题

radio型input元素可以实现选项的选择，但是是只要选中就不可以更改的。

	谁是这个世界上最好看最可爱的女孩子
	<br>
	<input type="radio">袁子函
	<input type="radio">袁子函
	<input type="radio">袁子函

运行结果如下👇

会出现这三个选项，并且选中了是无法取消的。

那么，如果我们希望选择一个，剩下两个自动取消选中，即每次只能选择一个，要怎么做呢？
这时候就需要input的另一个属性name=""了。

	谁是这个世界上最好看最可爱的女孩子
	<br>
	<input type="radio" name="a">袁子函
	<input type="radio" name="a">袁子函
	<input type="radio" name="a">袁子函

于是就可以只选择一个了。

但是这个初始时是没有任何一个被选择的，如果我们需要即使用户不选择，我们也要提交一个选择，即设置一个默认选择，这时候要怎么办呢？
这时候就需要input的另一个属性checked了。

比如还是这三个选项，我需要将默认选项设置为第一个，这时候只需要在这条语句后面加上这个属性就可以了。

这时候打开这个页面就是这样子的。第一个选项已经被选择了。

（希望老婆大人满意这一段）

E. 另一种选择

现在讲解选项列表select，这个我不太会用语言描述了，我们直接看效果吧。
需要注意的是，select需要与<option><option>配合使用，相当于ol和<li><li>的关系。

	你最喜欢的作家是？
	<br>
	<select>
		<option>余华</option>
		<option>威廉·福克纳</option>
		<option>村上春树</option>
		<option>王朔</option>
	</select>

效果如下👇

可以看到有个箭头是可以选择的。

有的浏览器还可以用户自己输入，但是只能输入选项里存在的内容。

所以这就有一个问题了，我如果还有别的喜欢的作家呢怎么办，你并没有给选择。

这就到我们要讲解的最后一个属性，数据列表。

F. 没有选择我就创造选择

如果页面提供的选择都不是用户想要的，那么用户就可以自己输入一个选择。这就需要用到数据列表datalist。
需要注意的是，数据列表datalist必须和input，一起使用，否则将什么都显示不出来。

以下为标准用法👇

	你最喜欢的作家是？
	<br>
	<input type="text" list="作家名单">
	<datalist id="作家名单">
		<option>余华</option>
		<option>威廉·福克纳</option>
		<option>村上春树</option>
		<option>王朔</option>
	</datalist>

注意，input里的list="作家名单"与datalist里的id="作家名单"是相对应的，相当于你给自己的选择起一个名字，再把这个当作标识传给input。

效果如下👇

可以看到，如果这些都不是你希望的选择，也可以自己写一个。

以上即为我对有关按钮及其他类似的东西的讲解。