网站导航免费论文 原创论文 论文搜索 定作论文 网学软件 学术大家 资料中心 会员中心 问题解答 定作论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 设计资源 > 表单美化 > 正文
HTML表单
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: Admin 发布时间: 09/04/16

HTML表单用来选择不同种类的用户输入。

 



示例

文本框:

 

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


这个例子说明了在HTML页面中如何创建文本框。在文本框中,用户可以输入文本。


密码框:

 

<html> <body> <form> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> <p> Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters. </p> </body> </html>
 


这个例子说明了在HTML页面中如何创建密码框。


在这个页面的底部,还有更多例子。

 



表单

表单是一个能够包含表单元素的区域。

表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。

表单是用<form>元素定义的。

 

<form>
<input>
<input>
</form>


 



Input

最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下:

 



文本框

在表单中,文本框用来让用户输入字母、数字等等。

 

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


在浏览器中显示如下:

 

 


注意,表单本身并不可见。另外,在多数浏览器中,文本框的宽度默认是20个字符。

 



单选按钮

当需要用户从有限个选项中选择一个时,使用单选按钮。

 

<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">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>


在浏览器中显示如下:

 

 


 



表单的action属性和提交按钮

当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。

 

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


在浏览器中显示如下:

 

 


如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。

 



更多示例:

复选框:
 

<html> <body> <form> I have a bike: <input type="checkbox" name="Bike"> <br> I have a car: <input type="checkbox" name="Car"> </form> </body> </html>
 


这个例子说明了在HTML页面中如何创建复选框。用户可以选中,也可以取消选择复选框。


单选按钮:
 

<html> <body> <form> Male: <input type="radio" checked name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> <p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked </p> </body> </html>
 


这个例子说明了在HTML页面中如何创建单选按钮。


简单的下拉列表:
 

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


这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。


预选的下拉列表:
 

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


这个例子说明了如何创建一个含有预先选定元素的下拉列表。


文本域:
 

<html> <body> <p> This example demonstrates a text-area. </p> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html>
 


这个例子说明了如何创建文本域(多行文本),用户可以在其中输入文本。在文本域中,字符个数不受限制。


创建按钮:
 

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


这个例子说明了如何创建按钮。按钮上的文字可以自己定义。


数据周围的标题边框:
 

<html> <body> <fieldset> <legend> Health information: </legend> <form> Height<input type="text" size="3"> Weight<input type="text" size="3"> </form> </fieldset> <p> If there is no border around the input form, your browser is too old. </p> </body> </html>
 


这个例子说明了如何在数据周围画带有标题的边框。

 



更多示例:

含有文本框和提交按钮的表单:
 

<html> <body> <form name="input" action="action.asp" method="get"> Enter your first name: <input type="text" name="FirstName" value="Mickey"> <br>Enter your last name: <input type="text" name="LastName" value="Mouse"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called action.asp. </p> </body> </html>
 


这个例子说明了在HTML页面中加入表单。这个表单包含了两个文本框和一个提交按钮。


含有复选框的表单:
 

<html> <body> <form name="input" action="action.asp" method="get"> I have a bike: <input type="checkbox" name="Bike" checked> <br> I have a car: <input type="checkbox" name="Car"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you send your input to a new page called action.asp. </p> </body> </html>
 


这个表单包含了两个复选框和一个提交按钮。


含有单选按钮的表单:
 

<html> <body> <form name="input" action="action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked> <br> Female: <input type="radio" name="Sex" value="Female"> <br> <input type="submit" value="Submit Now!"> </form> <p> If you click the "Submit" button, you will send your input to a new page called action.asp. </p> </body> </html>
 


这个表单包含了两个单选按钮和一个提交按钮。


从表单发送电子邮件:
 

<html> <body> <form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail" value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment" value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>
 


这个例子说明了如何从一个表单发送电子邮件。

  • 上一篇资讯: HTML表单验证
  • 网学推荐

    免费论文

    原创论文

    浏览:
    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号