HTML@6表单标签

作者 Jackie Anxis 日期 2016-08-09
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://o6vut8vrh.bkt.clouddn.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/>
    • 效果:



  • 其他还有很多有用的属性:autofocusreadonlymultiplerequired等等……可以访问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>