HTML表单:
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea) 下拉列表 单选框(radio-buttons) 复选框(checkboxes)等等
表单使用表单标签<form>来设置
<form>
input 元素
</form>
HTML表单--输入元素
多数情况下被用到的表单标签是输入标签(<input>)
输入类型是有类型属性（type）定义。大多数经常被用到的输入类型如下:
文本域（Text Tields）
本文域通过<input type="text">标签来设定，当用户要在表单中键入字母 数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
浏览器显示如下：
注意: 表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。密码字段：
密码字段是通过标签<input type="password">
<form>
Password: <input type="password" name="pwd">
</form>
浏览器显示效果如下:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（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="checkboxes">定义了复选框。用户需要从若干给定的选择中取一个或者若干个选项
<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" 的页面。该页面将显示出输入的结果。
单选按钮（radio）:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>单选按钮</title>
</head>
<body>
<form action="#">
<input type="radio" name="sex" value="male"/>Male<br/>
<input type="radio" name="sex" value="female"/>Female
<p><b>注意:</b>当用户点击一个单选按钮时，他就会被选中，其他同名的单选按钮就不会被选中</p>
</form>
</body>
</html>
复选框（Checkbox）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form action="#">
<p><input type="checkbox" name="vehicle" value="Bike"/>I have a bike</p>
<p><input type="checkbox" name="vehicle" value="car"/>I have a car</p>
</form>
</body>
</html>
简单的下拉列表:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<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>
</body>
</html>
预选下拉列表:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>预选下拉列表</title>
</head>
<body>
<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>
</body>
</html>
文本域(Textarea):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本域(Textarea)</title>
</head>
<body>
<form action="#">
<textarea cols="30" rows="10">
我是一个文本框
</textarea>
</form>
</body>
</html>
创建按钮：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>创建按钮</title>
</head>
<body>
<form action="#">
<p>
<input type="button" value="Hello world!"/>
</p>
</form>
</body>
</html>
带边框的表单：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>带边框的表单</title> </head> <body> <section> <form action="#"> <fieldset> <legend>Personal information</legend> <p>Name: <input type="text" size="10"/> </p> <p>E-email: <input type="text" size="30"/> </p> <p>Date of birth: <input type="text" size="10"/> </p> </fieldset> </form> </section> </body> </html>带有输入框和确认按钮的表单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>带有输入框和确认按钮的表单</title> </head> <body> <section> <form action="demo-form.php"> <p>First name: <input type="text" name="FirstName" value="Mickey"/> </p> <p>Last name: <input type="text" name="LastName" value="Mouse"/> </p> <p> <input type="submit" value="提交"/> </p> </form> <p>点击“提交”按钮，表单数据将被发送到服务器上的“demo-form.php”。</p> </section> </body> </html>带有复选框的表单：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>带有复选框的表单</title> </head> <body> <section> <form action="#" method="post"> <p>I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> </p> <p>I have a car: <input type="checkbox" name="vehicle" value="car"/> </p> <p> <input type="submit" value="提交"/> </p> </form> </section> </body> </html>带有单选按钮的表单：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>带有单选按钮的表单</title> </head> <body> <section> <form action="#"> <p>Mable: <input type="radio" name="sex" value="male" checked/> Female: <input type="radio" name="sex" value="female"/> </p> <p> <input type="submit" value="提交"/> </p> </form> </section> </body> </html>从表单发送电子邮件:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>从表单发送电子邮件</title> </head> <body> <h3>发送邮件到 someone@example.com;</h3> <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> <p>Name: <input type="text" name="name" value="your name"/> </p> <p>E-mail: <input type="text" name="mail" value="your email"/> </p> <p>Comment: <input type="text" name="comment" value="your comment" size="50"/> </p> <p> <input type="submit" value="发送"/> <input type="reset" value="重置"/> </p> </form> </body> </html>
HTML 表单标签
New : HTML5新标签
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单基本结构</title> </head> <body> <h2>网易邮箱注册</h2> <section> <form action="#" method="post" name="form1" enctype="multipart/form-data"> <!--文本框--><!--value:值是发向服务器的--> <!--邮箱--> <p>邮箱地址: <input required type="email" name="email" size="20" maxlength="20"/> </p> <!--密码框--> <p>密 码: <input required type="password" name="password" size="20" maxlength="20"/> </p> <p>确认密码: <input type="password" name="password" size="20" maxlength="20"/> </p> <!--单选按钮--> <p>性 别: <input type="radio" value="male" name="gender" id="male" checked/><label for="male">男</label> <input type="radio" value="female" name="gender" id="female"/><label for="female">女</label> </p> <p>手机号码: <input type="text" required pattern="1^[258]\d{9}"/> </p> <!--复选框--> <p>爱 好: <input type="checkbox" name="love" value="sports"/>运动 <input type="checkbox" name="love" value="charting"/>聊天 <input type="checkbox" name="love" value="music"/>听音乐 </p> <!--下拉列表框--> <p>籍 贯: 省份: <select name="province"> <option value="henan">河南</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> 城市: <select name="citys"> <option value="zhengzhou">郑州</option> <option value="chaoyangqu">朝阳区</option> <option value="zhabeiqu">闸北区</option> </select> </p> <!--普通按钮--> <p>验证码: <input type="text" name="code" maxlength="4" size="4"/> <input type="image" src="image/renren_code.gif"/> <input type="button" name="btnsend" value="免费获取验证码"/> </p> <!--文本域--> <p>头像上传: <input type="file" name="file"/> </p> <!--网址--> <p>信息来源: <input type="url" name="url"/> </p> <!--数字--> <p>年龄: <input type="number" name="age" min="1" max="200" step="2"/> </p> <!--滑块--> <p> <input type="range" name="range" min="1" max="200"/> </p> <!--搜索框--><!--placeholder=""文本提示内容--> <p>搜索框: <input type="search" name="goodsearch" placeholder="I love you"/> </p> <!--日历--> <p>出生日期: <input type="datetime-local" name="bir"/> </p> <!--多行文本--> <textarea readonly name="xieyi" cols="20" rows="10"> 同意同意同意同意同意同意同意同意同意 同意同意同意同意同意同意同意同意同意 同意同意同意同意同意同意同意同意同意 同意同意同意同意同意同意同意同意同意 同意同意同意同意同意同意同意同意同意 同意同意同意同意同意同意同意同意同意 </textarea> <input type="checkbox" checked/>同意网易注册协议 <!--重置按钮--> <p> <input type="submit" name="bsnsub" value="立即注册"/> <input type="reset" name="btnreset" value="重置"/> </p> <!--图片按钮--> <p> <input type="image" src="image/renren.gif"/> </p> </form> </section> </body> </html>
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
