| 标签 | |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <texteaer> | 定义文本域 (一个多行的输入控件) |
| <lable> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist> | 指定一个预先定义的输入控件选项列表 |
| <keygen> | 定义了表单的密钥对生成器字段 |
| <output> | 定义一个计算结果 |
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单</title>
</head>
<body>
<h4>文本输入框</h4>
<form action="">
First Name:<input type="text" name="firstname"><br>
Last Name: <input type="text" name="lastname">
</form><br/>
<h4>密码输入框</h4>
<form>
密码:<input type="password" name="password">
</form><br/>
<h4>单选按钮</h4>
<form>
<input type="radio" name="sex" value="man">男<br>
<input type="radio" name="sex" value="woman">女
</form><br/>
<h4>复选框</h4>
<form>
<input type="checkbox" name="fuxuan" value="Bike">bike<br/>
<input type="checkbox" name="fuxuan" value="Car">car
</form><br/>
<h4>提交按钮</h4>
<form name="input" action="form_action.php" method="get">
Name:<input type="text" name="name">
<input type="submit" value="提交">
</form><br/>
<h4>下拉列表</h4>
<form action="">
<select name="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form><br/>
<h4>带有预选值的下拉列表</h4>
<form action="">
<select name="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select>
</form><br/>
<h4>文本输入框</h4>
<textarea rows="10" cols="30">
文本框
</textarea><br/>
<h4>定义按钮</h4>
<form action="">
<input type="button" value="按钮">
</form><br/>
<h4>带边框的表单</h4>
<form>
<fieldset>
<legend>用户信息</legend>
姓名：<input type="text" size="30"><br/>
电话：<input type="text" size="30"><br/>
生日：<input type="text" size="30">
</fieldset>
</form><br/>
<h4>输入框与确认按钮</h4>
<form action="2.gif">
姓名：<input type="text" name="name" value="xc" size="30">
电话：<input type="text" name="tel" value="0707" size="30">
<input type="submit" value="提交" size="10">
</form><br/><br/>
<h4>选择提交</h4>
<form action="1.jpg">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
<input type="submit" value="提交">
</form>
<form action="2.gif">
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
<input type="submit" value="提交">
</form><br/>
<h4>发送邮件到swxctx@yeah.net:</h4>
<form action="MAILTO:swxctxone@yeah.net" method="post" enctype="text/plain">
姓名:<br>
<input type="text" name="name" value="你的姓名"><br>
邮件:<br>
<input type="text" name="mail" value="你的邮箱"><br>
文本:<br>
<input type="text" name="comment" value="你的文本内容" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form><br/>
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
来源：CSDN
作者：Swxctx
链接：https://blog.csdn.net/qq_28796345/article/details/52046270