码迷,mamicode.com
首页 > Web开发 > 详细

07 html 表单form元素 各种input元素 常用元素综合案例

时间:2015-05-16 00:01:37      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:

Html的表单元素,主要用途用户输入数据,并提交给服务器

基本语法是

<form action=”url”(是指把表单提交给谁) method=”提交的方法(get/post,默认是get”>

各种输入元素【输入框,下拉列表,文本域,密码框】

</form>

案例:登陆界面

login.html

<html>
<head>
<title>登陆界面</title>
</head>
<body>
<form action="ok.html"  method="get">
用户名:<input type="text" name="username" /><br/>
<!--空格实体,或者全角空格-->&nbsp;码:<input type="password" name="pwd"/><br/>
<input type="submit" value="登陆"/>&nbsp;&nbsp;<input type="reset" value="重新填写">
</form>
</body>
</html>

ok.html

<html>
<body>
登陆成功
</body>
</html>

运行效果图

技术分享

表单的基本语法

<form action="url" method=*>

... 
... 
<input type=submit> <input type=reset>
</form> 

表单中提供给用户的输入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script 

*=GET, POST 

(1)表单元素的格式

<input  type=*  name=**/>

type=text[文本框password[密码框hidden[隐藏域checkbox[复选框radio[单选框]

submit[提交按钮reset[重置按钮image[图片按钮]

name 是你给该表单元素取名

(2)action指定把这些请求交给哪些页面

Action一般提交的是servlet,jsp文件

Post不会把提交内容在地址栏显示

Get会把提交的用户名和密码显示但地址栏的

技术分享

图片也可以做成提交按钮

<input type="image" src="girl.jpg"/>

value 是在按钮上显示的字

Input元素举例

<html>
<body>
************  文本框与密码框    ************<br/>
名字:<input type="text" value="请输入名字" name="username"/><br/>
密码:<input type="password"   name="pwd"/><br/><br/>

************复选框(喜欢的水果)************<br/>
<!--name要保持一致-->
<input type ="checkbox" name ="v1">西瓜<br/>
<input type ="checkbox" name ="v1">苹果<br/><br/>

************单选框(选择性别) ************<br/>
<!--name要保持一致-->
<input type="radio" name="sex"><br/>
<input type="radio" name="sex"><br/><br/>

*******隐藏(他的用途主要是既可以提交数据,又不影响界面布局)****<br/>
<input type="hidden" value="123" name="sal"/><br><br/>

************下拉选择(请选择你的出生地)    ************<br/>
<select name="biradd">
<option value="">--请选择--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select><br/><br/>

*****************文本域(请留言)*************<br/>
<textarea cols="20"  rows="10">请在这里输入……</textarea>  <br><br/>


***********文件控件(选择你要上传的文件)********<br/>
<input type="file" name="myfile"/>请选择文件 <br><br/>

</body>
</html>

 

显示效果:

技术分享

 

07 html 表单form元素 各种input元素 常用元素综合案例

标签:

原文地址:http://www.cnblogs.com/super90/p/4507079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!