HTML表单

表单是一个包含单元素的区域，表单元素是允许用户在表单输入内容，比如：文本域（textarea）、下拉列表、单选框（radio）、复选框（checkboxes）等

表单使用标签<form>来设置

实例：

<form>


input元素


</form>

输入元素

多数情况下被用到的表单标签是输入标签<input>

输入类型是由（type）定义的。大多数经常被用到的输入类型如下

文本域

文本域通过<input type=”text”>标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

实例：

<form>


firstname


<input type="text" name="firstname" /><br />


lastname


<input type="text" name="lastname" />


</form>

注意：表单本事并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符

密码字段

密码字段通过标签<input type=”password”>来定义

实例：

<form>


password


<input type="password" name="password" />


</form>

注意：密码字段字符不会明文显示，而是以星号或圆点替代

单选按钮

<input type=”radio”>标签定义了表单单选框选项

实例：

<form>


<input type="radio" name="1" value="1" />1<br />


<input type="radio" name-"2" value="2" />2


</form>

复选框

<input type=”checkboxes”>定义了复选框，用户需要从若干给定的选择中选取一个或若干选项

实例：

<form>


<input type="checkbox" name="1" value="1" />1<br />


<input type="checkbox" name="1" value="1" />2


</form>

提交按钮

<input type=”submit”>定义了提交按钮，当用户单击确认按钮时，表单内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

实例：

<form name="checkbox" action="index.php" method="get">


<input type="checkbox" name="1" value="1" />1<br />


<input type="checkbox" name="1" value="1" />2<br />


<input type="submit" value="提交" />


</form>

下拉列表

<select>标签定义了下拉列表，<option>定义了下拉列表的内容

实例：

<form name="123">


<select>


<option value="1">1</option>


<option value="2">2</option>


<option value="3">3</option>


</select>


</form>

文本域

文本域由<textarea>标签定义

实例：

<textarea rows=”10” cols=”30”>


文本框


</textarea>

表单实例

带边框的表单

实例：

<form action="index.php">


<fieldset>


<legend>118qq.top</legend>


name:<input type="text" size="30" /><br />


pwd:<input type="password" size="30" /><br />


</fieldset>


</form>

从表单发送电子邮件

实例：

<h3>发送电子邮件到123456@qq.com</h3>

<form action="MAIL:123456@qq.com" method="post" enctype="text/plain">


name:<br />


<input type="text" name="name" value="你的用户名" /><br />


mail:<br />


<input type="text" name="mail" value="你的邮箱" /><br />


发信内容:<br />


<textarea size="50"></textarea><br />


<input type="submit" value="提交" />


<input type="reset" value="重置" />


</form>