本文介绍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:someone@w3school.com.cn" method="post" enctype="text/plain">
姓名:<br />
<input type="text" name="name" value="Tom Smith" size="20">
<br />
电邮:<br />
<input type="text" name="mail" value="test@126.com" 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>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
预览图:
原文地址:http://blog.csdn.net/books1958/article/details/41693527