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. 第四周作业——C语言自评

    1.你对自己的未来有什么规划?做了哪些准备?以目前的现状来说,希望至少能够掌握专业所要求的基本操作,然后一步步去深入.提升,毕业之后不会灰溜溜的一次次求职失败.目前更多的是利用闲暇时间补回过去老师同学 ...

  2. 操作系统之实验二Step1-有序顺序表

    实验二Step1-有序顺序表 专业:商业软件工程     班级:商软2班     姓名:甘佳萍     学号:201406114207 实验要求:初始化 输入数组元素个数. 输入n个数,排序输出. 存 ...

  3. 1029 C语言文法翻译（2）

    program à external_declaration | program external_declaration 翻译:<源程序>→ <外部声明> | <源程序 ...

  4. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  5. android Eclipse there no select

    点mainactivity类 右键  run as 进行 配置 就可运行

  6. 【C++】C++函数重载的总结

    函数重载: 出现在相同作用域中的两个函数,如果具有相同的名字而形参表不同,则称为重载函数(overloaded function).一定要注意函数重载的两个关键词:形参列表和作用域. 任何程序有且仅有 ...

  7. a标签不能嵌套

    <a href='http://www.baidu.com'> <a href='http://www.google.com'></a> </a> &l ...

  8. HDU4753 Fishhead’s Little Game——2013 ACM/ICPC Asia Regional Nanjing Online

    今天比赛又是做得好水的.被狂虐啊. 比赛两个多小时一直没出题,遒遒最先交的若干发都wa了.T_T 我独自在一遍苦思了1006这个题,还好最后把这个题目A掉了,不然又是深坑队友. 题目的意思我就不多说了 ...

  9. jquery中的append功能相当于剪切的作用 将原来的元素剪切走

    jquery中的append功能相当于剪切的作用 将原来的元素剪切走

  10. 使用android资源

    1.我们可以命名的资源种类有多少? 答: res/anim/ XML文件,它们被编译进逐帧动画(frame by frame animation)或补间动画(tweened animation)对象 ...