HTML@6表单标签

常用标签

表单标签

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

form标签

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

<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：普通的单行输入框

      <input type="text" placeholder="在此处输入试试">
      • 效果：

    • password：密码输入框

      <input type="password" placeholder="在此处输入密码">
      • 效果：

    • radio：单选框

      <input type="radio" name="sex" value="male"/>男
      <input type="radio" name="sex" value="female"/>女
      • 效果：男 女

    • checkbox：多选框

      <input type="checkbox">选项一
      <input type="checkbox">选项二
      <input type="checkbox">选项三
      • 效果：选项一 选项二 选项三

    • file：文件上传

      <input type="file">
      • 效果：
    • hidden： 隐藏某个input标签
      隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

    • button：没有任何反应的按钮

      <input type="button">
      • 效果：

    • submit：提交按钮，是用来提交整个表单的数据

      <input type="submit">
      • 效果：

    • image：定义图像形式的提交按钮。

      <input type="image" src="http://jackie-image.oss-cn-hangzhou.aliyuncs.com/16-8-13/76798647.jpg">
      • 效果：

    • reset：重置按钮，重置表单所有数据

      <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元素有值能提交，比如：

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

  • placeholder属性： 输入框的提示信息
    规定帮助用户填写输入字段的提示。当然非输入字段是没用的……

    <input type="text" placeholder="在此处输入试试">
    • 效果：

  • checked属性： 使带有这个属性的input标签默认处于选中状态

    <input type="radio" name="sex" value="male"/>男
    <input type="radio" name="sex" value="female" checked/>女
    • 效果：

      男
      女

  • disabled属性： 禁用该标签
    提示：disabled属性不能和type=”hidden”一起使用。

    <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选项进行分组
    <select id="delivery">
    	<optgroup>
    		<option value="0">快递</option>
    		<option value="1">EMS</option>
    	</optgroup>
    	<option value="2" selected>平邮</option>
    </select>

效果：

textarea标签

textarea就是多行的文本输入控件。贴上链接：HTML textarea标签

<textarea rows="3" cols="20">
	在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>


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

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

button标签

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

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

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

label标签

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

<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>