HTML表单总结

来源：互联网发布：淘宝空间图片协议在那编辑：程序博客网时间：2024/06/18 01:20

一 HTML 表单标签

标签
描述

<form>
定义供用户输入的表单

<input>
定义输入域

<textarea>
定义文本域 (一个多行的输入控件)

<label>
定义了 <input> 元素的标签，一般为输入标题

<fieldset>
定义了一组相关的表单元素，并使用外框包含起来

<legend>
定义了 <fieldset> 元素的标题

<select>
定义了下拉选项列表

<optgroup>
定义选项组

<option>
定义下拉列表中的选项

<button>
定义一个点击按钮

<datalist> --html5
指定一个预先定义的输入控件选项列表

<keygen>New --html5
定义了表单的密钥对生成器字段

<output>New --html5
定义一个计算结果

二简单例子
1 创建文本域

<body><form action="">First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form></body>

2 创建密码字段

<body><form action="">Username: <input type="text" name="user"><br>Password: <input type="password" name="password"></form></body>

三表单

在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项

<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female</form>

复选框（Checkboxes）
<input type="checkbox"> 定义了复选框.

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>

提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定

义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据

进行相关的处理。

<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传

送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

四实例
1 带边框的表单

<form action=""><fieldset><legend>Personal information:</legend>Name: <input type="text" size="30"><br>E-mail: <input type="text" size="30"><br>Date of birth: <input type="text" size="10"></fieldset></form>

2 带有输入框和确认按钮的表单

<form action="demo-form.php">First name: <input type="text" name="FirstName" value="Mickey"><br>Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="Submit"></form>

3 带有复选框的表单

<form action="demo-form.php" method="get">  <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="Submit"></form>

4 带有单选按钮的表单

<form action="demo-form.php" method="get">  <input type="radio" name="sex" value="Male"> Male<br>  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>  <input type="submit" value="Submit"></form>

5 从表单发送电子邮件

<body><h3>Send e-mail to someone@example.com:</h3> <form action="MAILTO:someone@example.com" method="post"enctype="text/plain">Name:<br><input type="text" name="name" value="your name"><br>E-mail:<br><input type="text" name="mail" value="your email"><br>Comment:<br><input type="text" name="comment" value="your comment" size="50"><br><br><input type="submit" value="Send"><input type="reset" value="Reset"></form></body>

6 简单下拉列表

<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select></form>

7 文本域

<!DOCTYPE html><html><body><textarea rows="10" cols="30">我是一个文本框。</textarea></body>/html>

8 预选下拉列表

<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select></form>

9 创建按钮

<form action=""><input type="button" value="Hello world!"></form>

代码都直接可用，拿去花吧；

0 0