HTML5-表单自带验证

一菩提 發表於 2019-9-23 14:59:00

表单语法 <formmethod="post"（规定如何发送表单数据常用值：get|post） action="result.html">（表示向何处发送表单数据） 名字：<input name="name" type="text" > 密码：<input name="pass" type="password" > <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填“/> </form> 经验：在实际网页开发中通常采用post方式提交表单数据
<h2>表单元素格式</h2>
语法：
<div class="cnblogs_code">
<pre><inputtype="text"（input元素类型）name="fname"（input元素名称）
value="text"（input元素的值）/></pre>
</div>
<h2>表单元素</h2>
文本框-语法
<div class="cnblogs_code">
<pre><inputtype="text"(文本框)name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) /></pre>
</div>
<div class="cnblogs_code">
<pre>密码框-语法

<inputtype="password "(密码框)name="pass"(密码框的名称)size="20"(密码框的长度) />
单选按钮-语法

<input name="gen" type="radio"(单选按钮框) value="男"(值)checked(单选按钮选中状态)/>男
<input name="gen" type="radio" value="女" />女
复选框-语法

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
列表框-语法

<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>
按钮-语法

<input type="reset" (重置按钮) name="butReset"value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>

图片按钮

<input type="image" src="images/login.gif"/(图片路径)>
多行文本域-语法

<textarea(多行文本域)name="showText"cols="x"(显示的列数)rows="y"(显示的行数)>文本内容 </textarea>
文件域-语法

<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
邮箱-语法

<p>邮箱:<input type="email"（邮箱）name="email"/></p>
<input type="submit"/>
注意：会自动验证Email地址格式是否正确

网址-语法

<p>请输入你的网址:<input type="url"（网址）name="userUrl"/></p>
<input type="submit"/>
注意：会自动验证URL地址格式是否正确

数字-语法

<p>请输入数字:<input type="number"(数字)name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>
滑块-语法

<p>请输入数字:<input type="range"(滑块)name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>
搜索框-语法

<p>请输入搜索的关键词:<input type="search"(搜索框)name="sousuo"/></p>
<input type="submit"/>
 

表单的高级应用
隐藏域-语法

<input type="hidden"(隐藏域) value="666" name="userid">
只读和禁用-语法

<input name="name" type="text" value="张三"readonly(只读文本框)>
<input type="submit "disabled （禁用）value="保存" >
表单元素的标注

1.增强鼠标的可用性

2.自动将焦点转移到与该标注相关的表单元素上

语法

<label for="id"(表单元素的id)>标注的文本</label>
<input type="radio" name="gender" id="male"/(表单元素id)>
 </pre>
</div>
<h3 class="t">表单类型</h3>
<h3 class="t">email</h3>
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
<input type=email >
<h3 class="t">url</h3>
要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.
<input type=url >
<h3 class="t">number</h3>
要求输入格式数字，默认会有上下两个按钮，opera支持更好
<input type=number >
<h3 class="t">tel</h3>
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
<input type=tel >
<h3 class="t">range</h3>
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
<input type=range min=20 max=100 step=2 >
<h3 class="t">color</h3>
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中,可以设置默认值
<input type=color value=#ff0000 >
<h3 class="t">date, time, datetime, datetime-local, month, week</h3>
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
<ol>
<li><input type=date ></li>
<li><input type=time ></li>
<li><input type=datetime ></li>
<li><input type=datetime-local ></li>
<li><input type=month ></li>
<li><input type=week ></li>
</ol>
<h3 class="t">time</h3>
<input type=time >
<h3 class="t">datetime</h3>
<input type=datetime >
<h3 class="t">datetime-local</h3>
<input type=datetime-local >
<h3 class="t">month</h3>
<input type=month >
<h3 class="t">week</h3>
<input type=week >
<h3 class="t">search</h3>
此类型表示输入的将是一个搜索关键字,通过results=s 或者 x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见]
<input type=search results=s > <input type="search">
<h3 class="t">required</h3>
表单验证属性为require类型时,若输入值为空,则拒绝提交,并会有一个提示.这个很有用.并且可以用于textarea以及hidden/image/submit类型.
<input type=text required >
<h3 class="t">pattern</h3>
pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
<input type=email required pattern=\w+@+\.+/g >
<h3 class="t">placeholder</h3>
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,标准浏览器都能很好的支持.
<input type=text placeholder="your message" >
<h3 class="t">autofocus</h3>
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
<input type=text autofacus="true" >
<h3 class="t">list</h3>
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
<ol>
<li><input type="text" list="ilist"></li>
<li><datalist id="ilist"></li>
<li>    <option label="a" value="a">aaaaa</option></li>
<li>    <option label="b" value="b">bbbbb</option></li>
<li>    <option label="c" value="c">ccccc</option></li>
<li></datalist></li>
</ol>
<h3 class="t">autocomplete</h3>
此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
<input type=text autocomplete="on" >
<h3 class="t">keygen</h3>
keygen 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。所有主流浏览器都支持 keygen 标签，除了 Internet Explorer 和 Safari。
<keygen name="keygen" />
<h3 class="t">datalist</h3>
datalist 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。用 input 元素的 list 属性来绑定 datalist。
<label for="search">搜索引擎</label>  <input type="url" name="search" id="search" list="searchlist" autocomplete="on" pattern="https?://.+" /> <datalist id="searchlist"> 　　<option value="http://www.baidu.com/" > 　　<option value="http://www.google.com/" > 　　<option value="http://www.sogou.com/" > </datalist>
<h3 class="t">output</h3>
output 标签定义不同类型的输出，比如脚本的输出。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_output
<h3 class="t">meter</h3>
meter 标签定义度量衡。仅用于已知最大和最小值的度量。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_meter
<h3 class="t">progress</h3>
progress 标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_progress
<h3 class="t">contenteditable</h3>
此属性可以让摸个元素里面的文本节点或值变为可编辑
可以编辑的内容
可以编辑的内容
<h3 class="t">form表单演示</h3>
<form id="html5_form" action="" method="post">
<label for="isearch">搜索</label> <input id="isearch" type="search" name="isearch"> 请输入搜索内容
<label for="keygenx">加密强度</label>
<label for="name">用户名</label> <input id="name" type="text" name="name">
<label for="mail">Email</label> <input id="mail" title="example@domain.com" type="text" name="mail">
<label for="pass">密码</label> <input id="pass" type="password" name="pass">
<label for="age">年龄</label> <input id="age" type="range" name="age" value="30">
<label for="height">身高</label> <input id="height" type="number" name="height" value="170">
<label for="time">生日</label> <input id="time" type="date" name="time">
<label for="color">颜色</label> <input id="color" type="color" name="color" value="#c8bfe7">
下载进度：

标签。
<label for="search">搜索引擎</label> <input id="search" type="url" name="search">
<input class="sbt" type="submit" value="点一下瞧瞧">

</form>
<h3 class="path t">你的位置： 前端开发博客 > HTML5手册 > 表单</h3>
  
来源：https://www.cnblogs.com/yszr/p/11572415.html

頁: [1]

琼殿技术论坛's Archiver

HTML5-表单 自带验证

HTML5-表单自带验证