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

HTML表单处理用户输入

时间:2017-07-29 22:16:53      阅读:518      评论:0      收藏:0      [点我收藏+]

标签:click   max   点击   密码   cli   脚本   anti   veh   class   

1.HTML表单用于收集用户输入。通过<form> </form>标签定义

2.<input> 元素是最重要的文本元素。

2.1.text定义常规文本输入,password定义密码字段

<form >
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

2.2.radio定义单选按钮输入,checkbox 定义复选框

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

<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

2.3.submit定义提交按钮(提交表单)

<form action="/demo/demo_form.asp" method="GET">
<input type="submit" value="Submit">
</form> 

action 属性定义在提交表单时执行的动作。指定了某个服务器脚本来处理被提交表单
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
GET(默认方法):适用于没有敏感信息。表单数据较少(表单数据在页面地址栏中是可见的)

2.4.<input type="number"> 用于应该包含数字值的输入字段。

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

2.5.<input type="date"> 用于应该包含日期的输入字段。(month,week,time)

<form>
Birthday:
<input type="date" name="bday">
</form>

2.6.<input type="color"> 用于应该包含颜色的输入字段。

2.7.<input type="range"> 用于应该包含一定范围内的值的输入字段。

<form>
<input type="range" name="points" min="0" max="10">
</form>

2.8.<input type="email"> 用于应该包含电子邮件地址的输入字段。
2.9.<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。

 

3.<select> 元素下拉列表

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

 

4.<button> 元素定义可点击的按钮

<button type="button" onclick="alert(‘Hello World!‘)">Click Me!</button>

 


5.Input 属性
value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读(不能修改)
disabled 属性规定输入字段是禁用的
size 属性规定输入字段的尺寸(以字符计)

 

HTML表单处理用户输入

标签:click   max   点击   密码   cli   脚本   anti   veh   class   

原文地址:http://www.cnblogs.com/corolcorona/p/7257578.html

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