HTML5学习笔记--Form
来源:互联网 发布:年薪百万知乎 编辑:程序博客网 时间:2024/04/30 08:07
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><header><!--定义页眉--> <hgroup><!--定义文档中的标题组--> <h1>HTML5</h1> <h2>HTML4.01</h2> <h3>XHTML1.0</h3> </hgroup> <nav><!--定义主要的导航区域,对于侧边栏则不大适用--> <ul> <li>get waht</li> <li>get waht</li> <li>get waht</li> </ul> </nav></header><p contenteditable="true">aaa</p><!--可编辑性--><label for="input" >内容</label><input type="text" id="input" spellcheck="true" hidden="hidden"><!--斜体--><article><!--定义独立板块,容器元素,可嵌套(类似div)--> <header>题目</header> <p>文章内容</p> <article> <header> <h3>评论者:访客甲</h3> </header> <p>so nice!</p> </article> <article> <header> <h3>评论者:访客乙</h3> </header> <p>what a waste!</p> </article> <aside>附属信息 <b>bold粗体</b> <i>italic斜体</i> <u>underline下划线</u> <code>定义计算机代码,有种CData节的感觉,安全性增高</code> <pre>定义多行计算机代码 var result=0</pre><!--定义预格式化的文本--> <q>quote定义引用文本,自带双引号 <cite>——引用文本,通常为书籍或者杂志的标题</cite> <p><!--datetime:表示具体的时间戳--> <!--pubdate:是否为特定的文档发布标签--> 发布时间<time datetime="2015-03-15" pubdate="pubdate">2015年3月15日</time> </p> </q> <blockquote>标记长引用文本,相当于q的升级版本</blockquote> </aside><!--定义article的附属信息--> <footer>作者</footer></article><section><!--定义文档组成内容,与父标签从属关系,可自己嵌套或与article嵌套--> <h1>HTML5</h1> <article> <p>artile</p> <section> <em>so?</em> </section> </article></section><!--method:get通过URL传递(尽量少用,URL长度短于2KB),post通过后台直接传递,适用于数据量较大、安全性要求较高--><!--action:设置服务器接收和处理表单数据的URL--><!--enctype:发送服务器之前进行编码的编码方式,可选,尽在post时有效(这里是无效的)--><form action="#" method="get" enctype="multipart/form-data" accept="image/gif,image/jpg" accept-charset="iso-8859-1" target="_parent" novalidate autocomplete="off/on"><!--accept:指定通过文件上传提交的文件类型--><!--指定服务器处理表单数据所接受的字符集,可选--><!--novalidate:是否启用表单验证功能,属性为布尔值--> <p> 姓名: <input formaction="#" type="text" formenctype="multipart/form-data" name="usrName"><!--formaction:任何输入控件都可以设置,让不同的表单数据传输给不同的服务器--><!--formenctype:任何输入控件都可以设置,为不同的表单数据指定编码格式,对于文件上传输入型必须选择m/f以使用二进制编码确定能连续传送到服务器(其余一般用a/x)--> </p> <lable><!--设置输入型控件的说明信息,点击触发控件--> <input id="usrMess"> </input> </lable> <input type="submit"></form> <button type="button" disabled="false" autofocus form="相应表单的ID"><!--formmethod,formenctype,formtarget,formnovalidata--> <img src="" alt=""> </button></form><form action="#" method="post"> <fieldset><!--在控件周围创建边框表明控件是相关的--> <legend><em>必填项</em></legend><!--为表单控件组制定一个名称,必须作为fieldset的第一个元素--> <label>姓名 <input type="text" name="name"> </label> </fieldset> <fieldset> <legend><em>选填项</em></legend> <label>身高: <select name="height" multiple="multiple" disabled="true" data- form="相应表单的ID" autofocus><!--size属性不再支持。--><!--data:定义使用外部数据--><!--multiple:是否一次选择多项--> <option value="100">under 100cm</option> <option value="100">above 100cm</option> </select> </label> <label>职位: <select> <optgroup label="学生" disabled"disable"> <option value="本科生">本科生</option> <option value="研究生">研究生</option> </optgroup> <optgroup label=""> <option>职业的</option> <option value="兼职的"></option> </optgroup> </select> </label> </fieldset></form><form action="#" method="post"> <label> <input type="text" list="remined" name="school"> </label> <datalist id="remined"><!--输入选项--> <option value="html5是什么" label="top1"/> <option value="html5"></option> <option value="make">nake?</option> </datalist></form><form action="#" method="post"> <label> 安全强度: <keygen name="security"><!--规定用于表单的额密钥对生成器字段--> </label> <input type="submit"></form><form method="post" action="#" id="myform"> <label> 图片: <input type="file" name="pic" accept="image/gif,img/jpeg" formenctype="multipart/form-data"><!--input type="image":图像式提交按钮;"radio":定义单选按钮;"checkbox":定义复选框;"submit""reset":提交重置--> </label></form><form method="post" action="#"> <label> 电子邮件: <input type="email" name="useEmail"/> <input type="submit"> </label> <label> 网址: <input type="url" name="usrUrl"/> <input type="submit"> <!--"number":定义数字的输入域,min定义允许输入的最小值,step定义变化间隔; "range":滑动条数字输入域; "search":定义搜索域,result定义显示搜索结果的条数。 "color":定义颜色选择域; "date":定义日期选择域;"time":定义时间输入域;"month";"week";"dateyime":date+time;"datatime-local":默认显示本地时间; "telephone":定义电话号码输入域,但是没有目前没有浏览器支持,还是得加正则匹配。--> </label></form><!--form的属性: placeholder:定义一个占位符,提示用户输入域期望输入的值。 required:定义必填项。 pattern:定义正则表达式对输入域进行验证。 multiple:定义输入域可以选择多个值。 list:与datalist标签组合定义输入域的选项列表。--><!--表单验证: validity:自带属性,是否合法 validity.valueMissing:是否为空 typeMismatch:类型不合法 tooLong:输入超过规定长度 stepMismatch:返回用户的输入数字是否合法(符合step) rangeUnderflow:输入的数字是否小于设置的最小值 rangeOverflow:输入的数字是否大于设置的最大值 patternMismatch:输入的内容是否满足规定的验证要求 valid:返回所有输入的字段是否有效 customError:返回是否用户自定义的错误 preventDefault()关闭浏览器的默认错误提示信息,并且可以自定义错误信息--><textarea cols="10" rows="10" name="message" readonly disabled="flase" required inputmode><!--readonly:设置文本区域是否可读--><!--required:是否必填--></textarea><footer> Copyrights! make<em>get</em><!--斜体--></footer><!--定义页脚--></body></html>
0 0
- HTML5学习笔记--Form
- Html5学习之Form
- oracle form学习笔记
- redux-form学习笔记
- form学习笔记
- HTML5混编学习笔记: 表单(form)、响应式web设计(RWD)
- HTML5学习笔记 HTML5基础教程
- HTML5学习笔记
- HTML5学习笔记
- html5标签学习笔记
- html5学习笔记之一
- html5 学习笔记
- html5 视频学习笔记。。。
- 学习HTML5笔记
- html5学习笔记一
- html5学习笔记二
- html5学习笔记三
- html5学习笔记四
- 一对一,多对多映射配置
- Java 装饰模式 (Decorator)
- Struts2基础
- 计算机是如何启动的?
- 个性化配置--Linux Terminal终端
- HTML5学习笔记--Form
- BZOJ-1857-传送带-SCOI2010
- easyui添加自定义图标
- 一款基于jquery带百分比的响应式进度加载条
- c#---类和结构
- 大骆驼第一章 perl概述
- Java开发熟手该当心的11个错误
- 编译 50 字节代码耗费 4G 内存 2015-03-17 程序员的那些事 程序员的那些事 程序员的那些事 微信号 iProgrammer 功能介绍 最有影响力的程序员自媒体,关注程序员相关话题
- 大骆驼 第二章