<input>标签常见用法
2016-03-17 09:53
218 查看
定义和常见用法
标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.创建文本域text(单行)
(多行):
2.密码域password
3.复选框checkbox
4.单选按钮radio
5.简单下拉列表select
6.创建按钮
7.围绕数据的Fieldset
样图:
8.带有输入框和确认按钮的表单
样图:
9.带有输入框和确认按钮的表单
样图:
10.带有单选按钮的表单
样图
11.从表单发送电子邮件
样图:
标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.创建文本域text(单行)
<html> <body> <form> 名: <input type="text" name="firstname"> <br /> 姓: <input type="text" name="lastname"> </form> </body> </html>
(多行):
<html> <body> <p>This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30">The cat was playing in the garden. </body> </html>
2.密码域password
<html> <body> <form>用户: <input type="text" name="user"> <br /> 密码: <input type="password" name="password"> </form><p>请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。</p> </body> </html>
3.复选框checkbox
<html> <body> <form>我喜欢自行车: <input type="checkbox" name="Bike"> <br /> 我喜欢汽车: <input type="checkbox" name="Car"> </form> </body> </html>
4.单选按钮radio
<html> <body> <form>男性: <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性: <input type="radio" name="Sex" value="female" /> </form> <p>当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。</p> </body> </html>
5.简单下拉列表select
<html> <body> <form> <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>
6.创建按钮
<html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html>
7.围绕数据的Fieldset
<!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高:<input type="text" /> 体重:<input type="text" /> </fieldset> </form> <p>如果表单周围没有边框,说明您的浏览器太老了。</p> </body> </html>
样图:
8.带有输入框和确认按钮的表单
<html> <body> <form action="/example/html/form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form> <p>请单击确认按钮,输入会发送到服务器上名为 "form_action.asp" 的页面。</p> </body> </html>
样图:
9.带有输入框和确认按钮的表单
<html> <body> <form name="input" action="/html/html_form_action.asp" method="get">I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /><br />I have a car: <input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /><br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您点击 "Submit" 按钮,您将把输入传送到名为 html_form_action.asp 的新页面。</p> </body> </html>
样图:
10.带有单选按钮的表单
<html> <body> <form name="input" action="/html/html_form_action.asp" method="get">Male: <input type="radio" name="Sex" value="Male" checked="checked"><br />Female: <input type="radio" name="Sex" value="Female"><br /> <input type ="submit" value ="Submit"> </form> <p>如果您点击 "Submit" 按钮,您将把输入传送到名为 html_form_action.asp 的新页面。</p> </body> </html>
样图
11.从表单发送电子邮件
<html> <body> <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"> <h3>这个表单会把电子邮件发送到 W3School。</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="yourcomment" size="40"><br /><br /> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html>
样图:
相关文章推荐
- Java WebService 简单实例
- 中小企业的大数据技术路线选择
- c语言基本数据类型
- Cookie与Session的区别-总结很好的文章
- 深入理解Java内存模型 volatile
- iOS应用开发中使用设计模式中的观察者模式的实例
- Android微信SDK API 调用教程
- iOS滚动视图缩放图片
- 笔记 android Drawerlayput NaviationView CoordiatorLayout
- Android studio 调用Assets中的xml文件
- hadoop1.2.1伪分布模式配置
- SceneManager.LoadScene的使用方法
- javamail 通过163邮箱发送邮件
- Tomcat配置Basic Authentication
- SQLite可视化管理工具
- 样本非平衡问题
- C#基础
- HttpClient在Android Studio中报错
- Ubuntu上简单搭建nginx
- Sqrt(x)