常用标签

表单标签

表单标签是 HTML 中非常重要的标签，可以用来上传信息而且在 HTML5 中有扩展了很多 input 类型的表单标签，是和用户进行信息交互的重要媒介。但是表单标签家族人员众多，如果要讲完，还是挺费劲的，所以我也只是简述而已。

form标签

一般来说，会把<form>标签放在表单的最外面，因为一般而言，表单数据都会发送给后台，让后台进行处理，那么就需要定义，后台的地址是什么，用什么方式传给后台（POST or GET?）等等。总而言之，如果把表单看成一封信，那么 form 标签就是它的信封，标注着收件地址，怎么寄送等等。挂出 W3School 的详细信息：HTML form 标签。

1
2
3
4
<form action="/login" method="post">
<!--action: 后台地址， method: 提交方式-->
<!-- 这里面就放入表单 -->
</form>

action 属性表示的是后台地址，method 就是传输方式（POST or GET）。具体想知道 POST 和 GET 传给后台之间有什么区别，以后我也会详细推出一篇笔记来阐述两者区别，现在暂时先看别人的日志：
W3School：HTTP 方法：GET 对比 POST
hyddd：浅谈 HTTP 中 Get 与 Post 的区别
gideal_wang：HTTP POST GET 本质区别详解

fieldset标签

这个标签是用来划分表单的，将不同表单进行分组，比如填写个人基本信息的相关表单放在一个<fieldset>标签，填写个人教育经历的放在另一个。这个没什么好讲的……

legend标签

通常被用来配合<fieldset>标签使用，是用来表示一个 filedset 的标题信息的。

input标签

input 标签千变万化，可以用来作为输入框，按钮，单选框等等等等，这都和它的type属性息息相关，不同的 type 就能变幻出不同的形态，当然我还是贴出这个标签的权威解答：HTML input 标签。

  • type 属性： 变换不同形态
    type 属性有以下这些值，当然，你如果想有更多的体验，可以访问 →HTML input 标签的 type 属性，自己写代码试试看：

    • text：普通的单行输入框
    1
    <input type="text" placeholder="在此处输入试试">
    • 效果：
    • password：密码输入框
    1
    <input type="password" placeholder="在此处输入密码">
    • 效果：
    • radio：单选框
    1
    2
    <input type="radio" name="sex" value="male"/>男
    <input type="radio" name="sex" value="female"/>女
    • 效果：男 女
    • checkbox：多选框
    1
    2
    3
    <input type="checkbox">选项一
    <input type="checkbox">选项二
    <input type="checkbox">选项三
    • 效果：选项一 选项二 选项三
    • file：文件上传
    1
    <input type="file">
    • 效果：
    • hidden： 隐藏某个 input 标签
      隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
    • button：没有任何反应的按钮
    1
    <input type="button">
    • 效果：
    • submit：提交按钮，是用来提交整个表单的数据
    1
    <input type="submit">
    • 效果：
    • image：定义图像形式的提交按钮。
    1
    <input type="image" src="https://jackie-image.oss-cn-hangzhou.aliyuncs.com/16-8-13/76798647.jpg">
    • 效果：
    • reset：重置按钮，重置表单所有数据
    1
    2
    3
    4
    5
    6
    7
    8
    <form>
    	<input type="text" placeholder="在此处输入试试">
    	<input type="password" placeholder="在此处输入密码">
    	<input type="checkbox">选项一
    	<input type="checkbox">选项二
    	<input type="checkbox">选项三
    	<input type="reset">
    </form>
    • 效果：（可以先输入信息，点击 reset 之后清除）
      选项一选项二选项三

  • name 属性： input 元素的名称
    提交表单时对表单数据进行标识，因为你把数据提交到后台后，肯定要对每个表单数据都有一个标记，也就是他们的名字，这也就是 name 属性的意义。

  • value 属性： input 元素的值
    当然，你经常有需要会让某些 input 元素有一些预设值，或者让某些 input 元素有值能提交，比如：

1
2
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
  • placeholder 属性： 输入框的提示信息
    规定帮助用户填写输入字段的提示。当然非输入字段是没用的……
1
<input type="text" placeholder="在此处输入试试">
- 效果：<input type="text" placeholder="在此处输入试试">
  • checked 属性： 使带有这个属性的 input 标签默认处于选中状态
1
2
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female" checked/>女
- 效果：
男 女
  • disabled 属性： 禁用该标签
    提示：disabled 属性不能和 type=”hidden”一起使用。
1
2
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female" checked disabled/>女
- 效果：
男 女
  • 其他还有很多有用的属性：autofocus，readonly，multiple，required等等……可以访问HTML input 标签。

select标签

同样先贴上 W3School 的链接：HTML select 标签
下拉菜单，有几个需要配合 select 一起使用的标签：

  • option：也就是菜单选项
  • optgroup：可以对 option 选项进行分组
1
2
3
4
5
6
7
<select id="delivery">
	<optgroup>
		<option value="0">快递</option>
		<option value="1">EMS</option>
	</optgroup>
	<option value="2" selected>平邮</option>
</select>

效果：
textarea 有几个较为重要的属性，简单讲解：

  • rows：文本输入框可见的行数
  • cols：文本输入框可见的列数
  • 其他还有：autofocus，readonly，disabled，placeholder，required 等等

button标签

button 标签就是按钮标签，HTML button 标签。

1
<button onclick="alert('hello!')">click here!</button>

效果：
这个 button 标签比<input type="button">提供了更为强大的功能和更丰富的内容。

label标签

<label>标签为 input 元素定义标注（标记）。可以用 label 的 for 属性绑定另外一个元素，只要 label 的 for 属性的值和另外一个元素的 id 相同，此时如果你点击 label 标签的文本，就会自动触发那个绑定的控件，就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。可以将以下代码复制到<body>标签下进行测试。

1
2
3
4
5
6
7
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>