首页 > Web开发 > 详细

HTML5 1.12增强的表单

时间:2016-03-18 23:17:41      阅读:334      评论:0      收藏:0      [点我收藏+]

form元素

a.用来定义一个表单,是建立表单的基础元素(就类似定义表格的table)

b.表单的其他元素包含在form元素中,其主要子元素有:input/button/select......

form元素的属性

a.action:指表单的发送地址(服务器地址)

b.method:表单数据发送至服务器的方法,常用的有两种:get/post

提交方法get和post区别

a.数据恢复在网址之后主动提交给服务器

b.数据不会附在网址后,会将数据打包发送给服务器,等候服务器来读取数据进行处理

 

 

 

input元素

a.用来设置表单中的内容项,比如输入内容的文本框,按钮等

b.不仅可以布置在表单中,也可以在表单之外的元素使用

form元素的属性

a.type:指定输入内容的类型,默认为text:单行文本框

b.name:输入内容的识别名称,传递参数时候的参数名称

c.value:默认值

d.maxlength:输入的最大字数

e.readonly属性:只读属性,设置内容不可变更,提交时会提前发送至服务器

f.disable:设置为不可用(不可操作                                                                                                                                                                  )

......

 

type元素的属性

a.password:密码状态输入

b.submit:提交按钮,点击将数据发送至服务器

c.reset:重置按钮

d.button:普通按钮

e.imge:图片式提交按钮

e.hidden:隐藏字段。该内容不会显示页面上;;一般为网页设计者的变量数据,提交时,隐藏内容会提交的服务器;;

f.mail:表示要输入一个电子邮箱。不同的版本提示效果可能有差异

g.url:表示要输入一个网址

h.tel:表示输入的内容是一个电话号码

j.number:可以配合input的max/min/step/value/规定允许输入的最大值/最小值/步长/默认值

k.range(活动条):可以配合input的max/min/step/value/规定允许输入的最大值/最小值/步长/默认值,但是以一个活动条的状态显示

 

 

 

 

 

 

<!DOCTYPE html>

<html lang="zh-cn">

<head>

   <meta charset="UTF-8">

        <title>13课<title>

</head>

<body>

        <form action="dz.html" target="blank">

              <input type="hidden" value="统计" name=“tj”>

               用户名:<input type="text" name="user" name="user" value="请输入用户名"><br><br>

               密码:<input type="pssword" name="ps" name="password"><br><br>

               国家:<input type="text" readonly=“readonly” name=“gj” value="中国"><br><br>

               提示:<input type="text" disabled="disabled" value="请慎重填写">

               <input type="submit"><input type="reset"><input type="button" value=“按钮”>

        </form><br>

        <div> 

               <input type="pssword" maxlength="8">

               <input type="submit" value="确定">

        </div>

</body>

</html>

 

 

 

<!DOCTYPE html>

<html lang="zh-cn">

<head>

   <meta charset="UTF-8">

        <title>13课<title>

</head>

<body>

        <h3>火锅店开业<h3>

        <form id="myform" name="myform" action="" method=“”>

               邮箱:<input type="email" name="email" required><br><br>

               我们的网址是什么?<input type="url">

              <input type="image" src=“../img/ding.png” >

        </form>

        <figure> 

               <img src="../img/hg.png" >

        </figure>

</body>

</html>

HTML5 1.12增强的表单

原文:http://www.cnblogs.com/piaopiaoppp/p/5294005.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!