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. 英文Datasheet没那么难读

    话说学好数理化,走遍天下都不怕.可是在这个所谓的全球化时代,真要走遍天下的话,数理化还真未必比得上一门外语.作为技术人员,可以看到的是目前多数前沿的产品和技术多来自发达的欧美等国家,而英语目前才是真正 ...

  2. Scrum立会报告+燃尽图（Beta阶段第二周第六次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2414 项目地址:https://coding.net/u/wuyy694 ...

  3. 团队backlog和燃尽图

    首先我们的团队的任务是做一款一对一交流的软件,我们团队的backlog如下: 用电脑搭建一个服务器一对一平台 实现数据库和Android的链接 编写登陆,注册页面,和登陆成功界面,和登陆失败页面 实现 ...

  4. iOS- Swift和Object-C的混合编程

    1.前言   事实证明,在短时间内Swift还取代不了Object-C, 而且.... Apple Swift 开发小组的人说的:「We'll recommend people start with ...

  5. .NET Core使用EF分页查询数据报错：OFFSET语法错误问题

    在Asp.Net Core MVC项目中使用EF分页查询数据时遇到一个比较麻烦的问题,系统会报如下错误: 分页查询代码: ) * condition.PageSize).Take(condition. ...

  6. Spring – 缓存注解

    Spring缓存抽象概述 Spring框架自身并没有实现缓存解决方案,但是从3.1开始定义了org.springframework.cache.Cache和org.springframework.ca ...

  7. erlang随机排列数组

    参考karl's answer 1> L = lists:seq(1,10). [1,2,3,4,5,6,7,8,9,10] Associate a random number R with e ...

  8. Struts2（三）

    以下内容是基于导入struts2-2.3.32.jar包来讲的 1.全局视图配置 xml标签:<global-results> <result name="error&qu ...

  9. 敏捷冲刺DAY6

    一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 对于可视控件,是能进行设计的,但是对于不可视组件,比如AdoConnection怎么才能设计.但是我看del ...

  10. 2nd 本周例行报告

    每周例行报告 1.个人项目:词频统计更新 C类型 C内容 S开始时间 E结束时间 I间隔(min) T净时间(min) 分析 功能分析 8:30 10:00 20 70 学习 查阅资料 10:00 1 ...