码迷,mamicode.com
首页 > Web开发 > 详细

HTML笔记(五)表单<form>及其相关元素

时间:2015-09-08 01:45:18      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

  表单标签<form>

  • 表单是一个包含表单元素的区域。
  • 表单元素是允许用户在表单中输入信息的元素。

  

  输入标签<input>

  输入标签的输入类型由其类型属性type决定。常见的输入类型如下:

  • 文本域Text Field
<input type="text" name="inputname" />
  • 单选按钮Radio Button

  注意:只能从中选其中一个。  

<form>
    <input type="radio" name="sex" value="male" /><br />
    <input type="radio" name="sex" value="female" /></form>
  • 复选框Checkbox

  当用户要从若干个选项中选择一个或多个选项时使用。

<form>
    <input type="checkbox" name="apple" />Apple
    <br />
    <input type="checkbox" name="banana" />Banana
    <br />
    <input type="checkbox" name="orange" />Orange
</form>
  • 按钮Button
<form>
    <input type="button" value="Click me">
</form>
  • 密码password和提交按钮submit
<form action="target.html" method="get">
    用户:
    <input type="text" name="user">
    <br />
    密码:
    <input type="password" name="password">
    <br />
    <input type="submit" value="提交" />
</form>

 

  域标签<fieldset>和域标题标签<legend>

  域标签<fieldset>可将表单内的相关元素分组打包,生成一组相关表单的字段。浏览器可以以某种特殊方式显示组内元素,比如特殊的边界、3D效果或甚至可创建一个子表单来处理这些元素。

  域标签<fieldset>没有必须的属性。<legend>标签为域标签定义了标题。

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    <br />
    体重:<input type="text" />
  </fieldset>
</form>

技术分享

 

  <label>标签

  <label>标签为input元素定义标记。它不会呈现任何特殊的效果,但是,当你把鼠标放在label元素内点击文本,会触发控件。

  <label>标签的for属性应该与相关元素的id属性一致。

<form>
    <label for="male"></label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female"></label>
    <input type="radio" name="sex" id="female" />
</form>

  

  下拉列表<select>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi" selected="true">Audi</option>
  </optgroup>
</select>

 

HTML笔记(五)表单<form>及其相关元素

标签:

原文地址:http://www.cnblogs.com/AmitX-moten/p/4790410.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!