form表单是网页设计html语言的一个重要应用,表单元素允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。那么当我们有特定的要求的时候,例如对用户一些操作的限制,可否实现Form表单自动验证呢?以下为您提供几个方法:
第一种,pattern属性的应用
<form>
<input id="poluoluo_pattern" name="poluoluo.com" required pattern="\d{3}" type="text"/>
<input type="submit" value="提交"/>
</form>
pattern属性的值一般为正则表达式,当用户输入的内容符合一定的格式,那么才能提交,否则将提示用户不符合要求,如上所示必须输入3位数字。
立即运行:
< form>
<input id="poluoluo_pattern" name="poluoluo.com" required pattern="\d{3}" type="text"/>
<input type="submit" value="提交"/>
< /form>
第二种、min属性和max属性的应用
<form>
<input id="poluoluo_min_max" name="poluoluo.com" required min="3" max="16" type="number"/>
<input type="submit" value="提交"/>
</form>
min和max这两个属性是数值类型或日起类型的input元素的专有属性,他限制了input元素中输入的数值和日期范围。属性值为数字。
立即运行:
< form>
<input id="poluoluo_min_max" name="poluoluo.com" required min="3" max="16" type="number"/>
<input type="submit" value="提交"/>
< /form>
第三种、step属性的应用
<form>
<input id="poluoluo_step" name="poluoluo.com" required step="10" min="0" max="100" type="number"/>
<input type="submit" value="提交"/>
</form>
step属性控制input元素的值增加或减少的步幅,例如你想让用户输入得值在0-100之间,但是必须是10的倍数时,则如上代码所示,点击下方运行看效果。
第四种、required属性的应用
<form>
<input id="poluoluo_required" name="poluoluo.com" required type="text"/>
<input type="submit" value="提交"/>
</form>
required属性可以用用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。
required属性表示此输入框是必填项,当提交的时候,如果此输入框为空,那么将提示用户输入后提交。
<form>
<input id="poluoluo_required" name="poluoluo.com" required type="text"/>
<input type="submit" value="提交"/>
< /form>
立即运行:
< form>
<input id="poluoluo_step" name="poluoluo.com" required step="10" min="0" max="100" type="number"/>
<input type="submit" value="提交"/>
< /form>
想要做一名专业的网页设计师,那么html语言是我们必须熟悉和熟练应用的基本语言,上述长春网页设计培训为大家介绍的form表单的应用就是重要的一个参数应用,大家可以作为学习表单应用的参考。
培训内容:网页设计软件|网页前台美工培训|div css样式|网店培训班|php程序开发|网站运营维护|网络营销|电子商务专业
学校地址:长春市绿园区新竹路与青浦路交汇(北京华联,火车站) 咨询电话:0431-81661151 / 15104316336 (来校请您提前致电了解开课安排)
乘车路线:22路,322路,231路,229路,64路,364路,224路,137路,139路,145路,226路,253路,284路,289路等
吉林省优秀网页设计师培训速成/就业首选品牌学校 小班教学/精讲班