HTML：表单

浏览数：38 / 时间：2015年06月09日

本文介绍html中表单的基本用法。

代码整理自w3school：http://www.w3school.com.cn

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<!--普通表单，单选按钮，复选按钮-->
<h3>普通表单</h3>
<body>
<form>
  帐号<input type="text" name="username" size="16"><br/><br/>
  密码<input type="password" name="password" size="16"><br/>
</form>

<h3>单选按钮表单</h3>
<form>
  <input type="radio" name="sex" value="male"/>男<br/>
  <input type="radio" name="sex" value="female"/>女
</form>

<h3>复选按钮表单</h3>
<form>
  <input type="checkbox" name="bike"/>I have a bike<br/>
  <input type="checkbox" name="car"/>I have a car
</form>

<!--一个按钮-->
<form>
  <input type="button" value="Login">
</form>

<!--表单的动作属性（Action）和确认按钮-->
<form name="input" action="html_form_action.asp" method="get">
  Username: <input type="text" name="user"/><input type="submit" value="Submit" />
</form>

<!--下拉列表-->
<h3>下拉列表</h3>
<form>
  选择城市：
  <select name="city">
    <option value="tianjin">天津</option>
    <option value="beijing">北京</option>
    <option value="shanghai" selected="selected">上海</option>
    <option value="chongqing">重庆</option>
    <option value="guangzhou">广州</option>
  </select>
</form>

<!--带分组的下拉列表-->
<h3>带分组的下拉列表</h3>
<form>
  选择城市：
  <select>
  <optgroup label="东北">
    <option value="haerbin">哈尔滨</option>
    <option value="shenyang">沈阳</option>
  </optgroup>
  <optgroup label="华北">
    <option value="beijing">北京</option>
    <option value="tianjin">天津</option>
    <option value="jinan">济南</option>
  </optgroup>
</select>
</form>

<!--指定大小的输入框-->
<textarea rows="5" cols="30">
The cat was playing in the garden.
</textarea>

<br/><br/><br/>
<!--在数据周围绘制一个带标题的框-->
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

<br/>
<!--使用按钮监听表单的行为-->
<h3>点击按钮时获取输入框的内容</h3>
<form action="input_form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

<h3>点击按钮时获取复选框的内容</h3>
<form name="input" action="checkbox_form_action.asp" method="get">
  <p>I have a bike:<input type="checkbox" name="vehicle" value="Bike" checked="checked" /></p>
  <p>I have a car: <input type="checkbox" name="vehicle" value="Car" /></p>
  <p>I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /></p>
  <input type="submit" value="Submit" />
</form> 
<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 checkbox_form_action.asp 的新页面。</p>

<h3>点击按钮时获取单选框的内容</h3>
<form name="input" action="radio_form_action.asp" method="get">
  Male: <input type="radio" name="Sex" value="Male" checked="checked">
  <br />
  Female: <input type="radio" name="Sex" value="Female">
  <br /><br />
  <input type ="submit" value ="Submit">
</form> 
<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 radio_form_action.asp 的新页面。</p>

<h3>这个表单会把电子邮件发送到 W3School。</h3>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
  姓名：<br />
  <input type="text" name="name" value="Tom Smith" size="20">
  <br />
  电邮：<br />
  <input type="text" name="mail" value="[email protected]" size="20">
  <br />
  内容：<br />
  <input type="text" name="comment" value="Thanks!" size="40">
  <br /><br />
  <input type="submit" value="发送">
  <input type="reset" value="重置">
</form>


<br/><br/>
</body>
</html>

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

预览图：