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