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. php-fpm配置

    [global] error_log = /letv/log/php-fpm_error.log [www] user = apache group = apache listen = 127.0.0 ...

  2. ES6对数组的扩展

    ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. ...

  3. 【探路者】团队互评Alpha版本

    [探路者]组互评连接: 1互评作品:SkyHunter http://www.cnblogs.com/zej87/p/7802000.html 2互评作品:爱阅app http://www.cnblo ...

  4. a6

    组员:陈锦谋 今日内容: 界面按钮.icon制作,PS学习 明日计划: 继续 困难: 时间不多吧,今天主要电气实践

  5. C语言的知识与能力予以自评

    看到一个问卷不错,拟作为第三次作业的部分内容. 你对自己的未来有什么规划?做了哪些准备?答:多学习几门生存技巧,首先先学会碰壁. 你认为什么是学习?学习有什么用?现在学习动力如何?为什么?答:学习是人 ...

  6. lintcode-205-区间最小数

    205-区间最小数 给定一个整数数组(下标由 0 到 n-1,其中 n 表示数组的规模),以及一个查询列表.每一个查询列表有两个整数 [start, end]. 对于每个查询,计算出数组中从下标 st ...

  7. 修改Oracle redo.log文件的大小

    1.查看当前日志组成员: SQL> select member from v$logfile; MEMBER ------------------------------------------ ...

  8. PHP上传文件限制的大小

    修改PHP上传文件大小限制的方法 1. 一般的文件上传,除非文件很小.就像一个5M的文件,很可能要超过一分钟才能上传完.但在php中,默认的该页最久执行时间为 30 秒.就是说超过30秒,该脚本就停止 ...

  9. wpf下使用NotifyIcon

    以前在winForm下使用过NotifyIcon,到wpf找不到了,在wpf下还是直接用WinForm里的那个NotifyIcon实现最小到系统托盘 定义一个NotifyIcon成员 : Notify ...

  10. BZOJ 2186 沙拉公主的困惑(预处理逆元+欧拉函数)

    题意:求1-n!里与m!互质的数有多少?(m<=n<=1e6). 因为n!%m!=0,所以题目实际上求的是phi(m!)*n!/m!. 预处理出这些素数的逆元和阶乘的模即可. # incl ...