form元素a.用来定义一个表单，是建立表单的基础元素（就类似定义表格的table）b.表单的其他元素包含在form元素中，其主要子元素有：input/button/select......form元素的属性a.action：指表单的发送地址（服务器地址）b.method：表单数

 

正文

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:设置为不可用（不可操作）

g.required:设置该内容为必须填写项，否则无法提交

......

type元素的属性（默认为text）

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/规定允许输入的最大值/最小值/步长/默认值，但是以一个活动条的状态显示

type元素

*用来建立一个下拉菜单选项列表，其具体列表项要通过option元素建立：1.option元素可以用来建立一个选项，即下拉列表的一个菜单项；2.outgroup用来对option元素进行组合分组

*不仅可以在表单中使用，还可以在其他元素和内联元素中使用

*sizes用来定义列表中显示的列表项

*multiple属性用来定义是否可以多选

*可以添加disable和autofocus属性

tadalist元素

*用来建立一个选项列表，其内容不会直接显示在网页上，只是会在用户输入时作为候选项，通常与input组合使用

<!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” alt="">

</form>

<figure>

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

</figure>

</body>

</html>

<DOVTYPE! html >

<htmllang="zh-cn">

<head>

<meta charest="UTF-8">

<title>14课</title>

</head>

<body>

</body>

</html>

HTML5增强的表单的更多相关文章

  1. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  2. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  3. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  4. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  5. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  6. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  7. 【HTML5】增强的表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. html5 localStorage实现表单本地存储

    随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...

  9. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. 通过Nrgok映射外网调试微信

    一.注册账号 注册地址:http://www.ngrok.cc/login 登录系统,新增域名 二.下载客户端,修改配置文件 修改ngrok.cfg auth_token值登录平台管理系统可查看 su ...

  2. Thunder团队第七周 - Scrum会议5

    Scrum会议5 小组名称:Thunder 项目名称:i阅app Scrum Master:邹双黛 工作照片: 宋雨沉迷于照相无法自拔,所以不在相片中. 参会成员: 王航:http://www.cnb ...

  3. 【week10】psp

    项目 内容 开始时间 结束时间 中断时间 净时间 2016/11/19(星期六) 写博客 吉林一日游规格说明书 10:30 15:10 20 260 2016/11/20(星期日) 看论文 磷酸化+三 ...

  4. bootstrap心得

    最近在弄个人的博客,之前对bootstrap的使用老是感觉使用的一般 幸好在看了慕课网的一个老师的实例教程之后,才感觉是真正对前端使用bootstrap有了一点理解 首先就是. 这些标签,其实都是相当 ...

  5. 分享几个IP获取地理位置的API接口(最全面的了)

    转载;https://cloud.tencent.com/developer/article/1152362 全网首发,最全的IP接口,不服来辩!博主找了几个小时的资料,又手动抓取到了几个接口补充进来 ...

  6. apache 部署web.py

    一.安装Mod_wsgi 1.先yum -y install httpd-devel,否则会提示没有apxs 2.如果在make时 wsgi报错apxs:Error: Command failed w ...

  7. mysql流程控制语句

    mysql编程 mysql编程中语句块包含符: 其实就是相当于js或php中大括号语法: [标识符:]begin //语句.... end  [标识符]: 标识符就是定义定义的任意的名字而已,比如: ...

  8. chrome调试selenium。其实我是无聊了

    from selenium import webdriverdriver = webdriver.Chrome()driver.get("http://www.baidu.com" ...

  9. 51nod 1574 排列转换(贪心+鸽巢原理)

    题意:有两个长度为n的排列p和s.要求通过交换使得p变成s.交换 pi 和 pj 的代价是|i-j|.要求使用最少的代价让p变成s. 考虑两个数字pi和pj,假如交换他们能使得pi到目标的距离减少,p ...

  10. BZOJ 1567 Blue Mary的战役地图(二维hash+二分)

    题意: 求两个矩形最大公共子正方形.(n<=50) 范围这么小可以枚举子正方形的边长.那么可以对这个矩形进行二维hash,就可以在O(1)的时候求出任意子矩形的hash值.然后判断这些正方形的h ...