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. http状态码 以及请求响应头相关

    1xx消息[编辑] 这一类型的状态码,代表请求已被接受,需要继续处理.这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束.由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非 ...

  2. 按Right-BICEP要求的对任务二的测试用例

    测试方法:Right-BICEP 测试计划 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.P-是否满足性能要求? 4.是否有乘除法? 5.是否有括号? 6.是否有真分数? ...

  3. BundleCollection学习（一）

    工作中有同事提到了mvc4提供了css,js压缩功能.类BundleCollection所以搜集资料记录学习下. 学习中………… MVC中用 BundleCollection 压缩CSS时图片路径问题 ...

  4. Iterable，Iterator和forEach

    Iterable Interface Iterable<T> 方法: Iterator<T> iterator() Returns an iterator over a set ...

  5. 分享：50行代码监听watch小程序的globalData

    监听方法: // 在任何组件.页面,例如页面 const app = getApp( ); Page({ onLoad: function( ) { app.watch$('role', ( val, ...

  6. HDU——1788 Chinese remainder theorem again

    再来一发水体,是为了照应上一发水题. 再次也特别说明一下,白书上的中国剩余定理的模板不靠谱. 老子刚刚用柏树上的模板交上去,简直wa出翔啊. 下面隆重推荐安叔版同余方程组的求解方法. 反正这个版本十分 ...

  7. 高斯消元模板（pascal）

    洛谷P3389评测 program rrr(input,output); const eps=1e-8; var a:..,..]of double; n,i,j,k:longint; t:doubl ...

  8. bzoj5090[lydsy11月赛]组题

    裸的01分数规划,二分答案,没了. #include<cstdio> #include<algorithm> using namespace std; const int ma ...

  9. String Typing CodeForces - 954B

    题意: 给一个字符串,可以复制某一段字符,问最少需要多少步能将其输出,比如abcabcd,先输入abc然后再赋值abc再输入d就只需要5步. 复制的这段字符 必须是从字符串的0位置开始复制的  而且只 ...

  10. [COGS1000]伊吹萃香 最短路

    1000. [東方S2] 伊吹萃香 输入文件:suika.in   输出文件:suika.out   简单对比 时间限制:1 s   内存限制:128 MB Problem 4 伊吹萃香(suika. ...