表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
输入
多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。
表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。
表单的动作属性(Action)和确认按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
表单标签
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义一个控制的标签 |
<fieldset> | 定义域 |
<legend> | 定义域的标题 |
<select> | 定义一个选择列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个按钮 |
<isindex> | 已废弃。有<input>代替。 |
<html>
<body>
<form>
名:
<input type="text" name="firstname" />
<br/>
姓:
<input type="text" name="lastname" />
</form>
<form>
用户:
<input type="text" name="user" />
<br/>
密码:
<input type="password" name="password" />
</form>
<p>
当用户在密码域输入密码的时候,浏览器将使用项目符号来代替这些字符
</p>
<form>
<input type="radio" name="sex" value="Male" /> Male
<br/>
<input type="radio" name="sex" value="Female" /> Female
</form>
<form>
我喜欢自行车
<input type="checkbox" name="Bike" />
<br/>
我喜欢汽车
<input type="checkbox" name="Car" />
</form>
<!-- 下拉表单-->
<form>
<select name="Sports" />
<option value="badminton"> badminton </option>
<!--将tennis设置为预选项-->
<option value="tennis" selected="selected"> tennis </option>
<option value="table tennis"> table tennis </option>
<option value="vally ball"> vally ball </option>
</form>
<form>
<p>
下面是创建一个文本输入区域,用户的输入字符不受限制
</p>
<textarea rows="10" cols="30">在我里面输入吧。。。</textarea>
</form>
<form>
<a href="http://www.baidu.com">
<input type="button" value="百度一下" >
</a>
</form>
<p>
下面在表单周围创建一个边框
</p>
<fieldset>
<legend>健康信息:</legend>
<form>
<label>身高:<input type="text" /> </label>
<label>体重:<input type="text" /> </label>
</form>
</fieldset>
</body>
</html>
<html>
<body>
<form action="mailto:kay0227@foxmail.com"
method="post" enctype="text/plain">
<h3> 这个表单将会把电子邮件发送到我的邮箱 </h3>
姓名:<br/>
<input type="text" name="name" value="yourname" size=20 />
<br/>
电邮:<br/>
<input type="text" name="mail" value="yourmail" size=20 />
<br/>
内容:<br/>
<input type="text" name="comment" value="yourcommont" size=40 />
<br/><br/>
<input type="submit" value="发送" />
<input type="reset" value="重置" />
</form>
</body>
</html>