大佬教程收集整理的这篇文章主要介绍了HTML5-输入验证,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
示例1:选择列表
<label for="fave">
Favorite Fruit:
<select name="fave" id="fave">
<option value="apples">苹果</option>
<option value="organges">橘子</option>
<option value="pears">梨</option>
</select>
</label>
示例2:选择列表,支持同时选多个
<label for="like">
Like Sport:
<select name="like" id="like" size="3" multiple>
<option value="football">足球</option>
<option value="basketball">篮球</option>
<option value="table tennis">乒乓球</option>
<option value="badminton">羽毛球</option>
<option value="swiming">游泳</option>
</select>
</label>
示例3:建立结构
<label for="love">
<select name="love" id="love">
<optgroup label="前端语言">
<option value="javascript">JavaScript</option>
<option value="html">Html</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="后端语言">
<option value="java">Java</option>
<option value="PHP">PHP</option>
</optgroup>
</select>
</label>
属性 | 说明 |
---|---|
rows | 行数 |
cols | 列数 |
wrap | 控制提交表单时文字中插入换行符的方式:hard时将会插入换行符;soft不会 |
示例:使用textarea元素
<form action="http://localhost:8888/form/select" method="post">
<p>
<label for="textarea_1">
请输入一段文字:<textarea name="textarea_1" id="textarea_1" cols="30" rows="10" wrap="soft"></textarea>
</label>
</p>
<p>
<label for="textarea_2">
请再次输入一段文字:<textarea name="textarea_2" id="textarea_2" cols="30" rows="10" wrap="hard"></textarea>
</label>
</p>
<input type="submit" value="提交">
</form>
output表示计算的结果。
示例:计算结果
<form action="return false;" oninput="res.value = quantity.value * price.value">
<fieldset>
<legend>价格计算</legend>
<input type="number" placeholder="数量" id="quantity" name="quantity"> x
<input type="number" placeholder="价格" id="price" name="price"> =
<output for="quantity price" name="res"></output>
</fieldset>
</form>
HTML5引入了对输入验证的支持。设计者可告知浏览器自己需要什么类型的数据,然后浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。其好处是:用户可以立刻得到问题反馈。
验证属性 | 支持元素 |
---|---|
requied | textarea、select、input(text,search,url,telephone,email,password,date pickers,number,checkBox,radio 以及 file) |
min、max | input(umber,range,date,datetime,datetime-local,month,time 以及 week) |
pattern | input(text,email 以及 password) |
示例:验证
<form action="http://localhost:8888/form/validate" method="post">
<p>
<label for="name">
姓名:<input type="text" name="name" id="name" required>
</label>
</p>
<p>
<label for="email">
邮箱:<input type="text" name="email" id="email" required pattern="\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+">
</label>
</p>
<p>
<label for="age">
年龄:<input type="number" name="age" id="age" min="1" max="150">
</label>
</p>
<input type="submit" value="提交">
</form>
注意:pattern验证邮箱和URL,不输入内容时其不会触发验证,所以需要配合required使用!
禁止输入验证:可以设置form元素的novalidate属性,也可以设置用来提交表单的button或input元素的formnovalidate属性。
以上是大佬教程为你收集整理的HTML5-输入验证全部内容,希望文章能够帮你解决HTML5-输入验证所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。