[HTML5]其他表单元素及输入验证

简介: [HTML5]其他表单元素及输入验证

目录


1、使用其他表单元素

    1.1、生成选项列表

    在select元素中构建结构

    1.2、输入多行文字

    1.3表示计算结果

    1.4、生成公开/私有密钥对

2、使用输入验证

    2.1、确保用户提供了一个值

    2.2、确保输入值位于某个范围内

    2.3确保输入值与指定模式匹配

3、禁用输入验证


1、使用其他表单元素

select、optgroup、textarea、output、keygen


1.1、生成选项列表

select元素可以用来生成一个选项列表供用户选择。


image.png


  • select元素的name、disabled、form、autofocus、requied属性与input元素的同名属性类似。
  • size属性:设定要显示给用户的选项数目

 

multiple属性:用户一次选择多个选项


提供给用户的选项由option元素


<select id="fave" name="fave">  
<option value="apples" selected label="Apples">Apples</option>  
<option value="oranges" label="Oranges">Oranges</option>  
<option value="cherries" label="Cherries">Cherries</option>  
<option value="pears" label="Pears">Pears</option>
</select>

 

用了四个option元素定义了提供给用户的选项,第一个option元素设置了selected属性,自动选中。


<select id="fave" name="fave"size="5" multiple>

⚠️要选多项,在点击选项时应按住ctrl键


在select元素中构建结构

optgroup元素:在select元素的内容中建立一定的结构。


用途:对option元素进行编组。

image.png

label属性:用来为整组选项提供一个小标题。


disabled属性:用来阻止选择组内的任何选项。


<select id="fave" name="fave"> 
<optgroup label="Top Choices">            
<option value="apples" label="Apples">Apples</option>                         
<option value="oranges" label="Oranges">Oranges</option> 
</optgroup>  
<optgroup label="Others">                              
<option value="cherries" label="Cherries">Cherries</option>                       
<option value="pears" label="Pears">Pears</option>
</optgroup>              
</select>


1.2、输入多行文字

textarea元素:生成多行文本框,用户可以在里面输入多行文字。

image.png

rows(高)和cols(宽)属性:设置大小。


wrap属性:hard(会插入换行符,结果是所提交的文字中每一行的字符数都不超过cols属性)和soft,用来控制在用户输入的文字中插入换行符的方式。


其他属性与input元素的同名属性用法相同。


<textarea cols="20" rows="5" wrap="hard" id="story" name="story">
Tell us why this is your favorite fruit</textarea> 
<!--宽20列,高5行。-->


1.3表示计算结果

output元素:表示计算的结果。

image.png

<input type="number" placeholder="Quantity" id="quant" name="quant"/> x 
<input type="number" placeholder="Price" id="price" name="price"/> =
<output for="quant name" name="res"/>

使用 两个number型input元素。用户在输入数值后,两个input元素的值相乘结果会显示值output元素中。


1.4、生成公开/私有密钥对

keygen元素:生成公开/私有密钥对。


公开密钥是包括客户端证书和SSL在内的众多web安全技术的基础。提交表单时,该元素会生成一对新的密钥。


  • 公钥被发给服务器,私钥则由浏览器保留并存入用户的密钥仓库。

image.png

  • name、disabled 、form、autofocus这四个属性的用法与input元素的同名属性相同。
  • keygen属性的用途:指定用来生成密钥对的算法,支持的值:RSA

 

    challenge属性:用来指定一条与公钥一起发送给服务器的密钥管理口令(challenge phrase。


2、使用输入验证

输入验证是通过表单元素的一些控制的。


2.1、确保用户提供了一个值

required属性:最简单的输入验证是检查用户是否提供一个值。

<input type="checkbox" required id="accept" name="accept"/>
  • 对于text和password型input元素,用户必须在文本框中输入文字。

   

对于checkbox型input元素,用户必须勾选对应的复选框。


⚠️用value属性提供的初始值可以满足required验证属性的要求。


      用户点击按钮提交表单时,第一个设置了required属性却没有获得输入值的元素会被突出显示,以引起用户的注意;然后用户可以补上遗漏的数据再提交表单。如果还有其他数据遗漏未填,那么下一个被漏掉的元素又会被突出显示。


2.2、确保输入值位于某个范围内

min和max属性用来确保输入的数值和日期数据处于指定的范围内。

<input type="number" min="0" max="100"  value="1" id="price" name="price"/>

只设置max属性表示输入值有一个上限,只设置min属性表示输入值有一个下限。要是两个属性同时使用,设定了一个输入范围。

只有用户输入一个值后min和max属性控制的输入验证才会起作用。


2.3确保输入值与指定模式匹配

pattern属性:用来确保输入值与一个正则表达式匹配。

<input type="text" id="name" name="name"pattern="^.* .*$"/>

确保用户输入以空格分隔的姓氏和名字。


  • 只有用户输入一个值后pattern属性控制的输入检验才会起作用。

3、禁用输入验证

设置form元素的novalidate属性;设置原来提交表单的button或input元素的formnovalidate属性。

<input type="submit" value="Save" formnovalidate/>
目录
相关文章
|
4月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
110 15
|
4月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
123 19
|
4月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
113 2
|
8月前
|
移动开发 HTML5
HTML5实现的手机验证抽奖领券效果源码
这是一款基于HTML5实现的手机验证抽奖领券效果源码。在输入框输入手机号码即可点击下方的按钮来进行抽奖游戏,中奖后还会弹出提示信息,是一款比较经典的抽奖游戏源码
282 9
|
10月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
9月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
9月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
10月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
9月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
10月前
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。