[HTML5] 定制input元素 (上)

简介: [HTML5] 定制input元素

目录

1、用input元素输入文字

   1.1、 设定元素大小

   1.2、设置初始值和占位式提示

   1.3、使用数据列表

   1.4、生成只读或被禁用的文本框

   1.5指定文字方向数据的名称

2、用input元素输入密码

3、用input元素生成按钮

4、用input元素为输入数据把关

   4.1用input元素获取数值

   4.2用input元素获取指定范围内的数值

   4.3用input元素获取布尔型输入

   4.4用input元素生成一组固定选项



input元素可以用来生成一个供用户输入数据的简单文本框。缺点在于用户在其输入什么值都可以


1、用input元素输入文字

type属性设置为text的input元素在浏览器中显示为一个单行文本框


text型input元素可用的额外属性:

image.png

⚠️如果要使用多行文本框,使用textarea元素


1.1、 设定元素大小

  • maxlength:设定了用户能够输入字符的最大数目(正整数)
  • size属性:设定了文本框能够显示的字符数目(正整数)
e<input maxlength="10" id="city " name="city "/>
<!--浏览器可以自行确定该文本框在屏幕上占据的宽度,但用户最多只能在其中输入10个字符。-->
<input size="10" id="city " name="city "/>
<!--浏览器必须确保该文本框的宽度足以显示10个字符,对用户能够输入的字符数目未做限制。-->
<input size="10" maxlength="10" id="city " name="city "/>
<!--浏览器必须确保该文本框的宽度足以显示10个字符,用户最多只能在其中输入10个字符。-->


1.2、设置初始值和占位式提示

  • value属性:设置初始值
  • placheholder属性:设置一段提示文字,告诉用户应该输入什么类型的数据
<input value="Apple " id="city " name="city "/>
<!--文本框里的默认值为Apple-->
<input placheholder="Your name "id="city " name="city "/>
<!--提示用户输入名字 。Your name在文本框内呈现为灰色字样。-->

⚠️用button元素重置表单时,浏览器会恢复文本框中的占位式提示和默认值。


1.3、使用数据列表

将 input元素的list属性设置为一个datalist元素的id属性值➡️用户在文本框中输入数据时只需要从后一元素提供的一批选项中进行选择。


datalist元素:可以提供一批值,以帮助用户输入需要的数据。


对于text型input元素,datalist元素提供的值以自动补全建议值的方式呈现:


image.png


提供给用户选择的值用option元素指定。

image.png


<datalist id="Fruit list">
     <option  value="apples" label ="apple"/>
     <option  value="oranges" >oranges </option >
     <option  value="banana"/>
</datalist>

显示在选择列表中的可以是option元素的value属性值,可以是设定的说明信息,可以是作为option元素的内容设置。


1.4、生成只读或被禁用的文本框

readonly属性:设置为只读


disabled属性:设置禁用


<input value="Alice" disabled  id="name"/>
<!--设置了disabled属性,文本框显示为灰色,用户不能编辑。-->
<input value="Alice" realonly  id="name"/>
<!--设置了readonly属性,用户不能编辑,但文本框不呈现为灰色。-->

⚠️ 设置了disabled属性的input元素的数据没有被提交到服务器。若要则使用hidden型的input元素。


  • readonly属性要谨慎使用,虽然数据能够发送给服务器,都是它外形跟一般设置好默认值的文本框一样,用户看不出来该文本框已经禁止编辑。


1.5指定文字方向数据的名称

dirname属性:将用户输入文字的方向数据发送给服务器,属性值就是方向数据项的名称。


2、用input元素输入密码

type属性值设置为password的input元素用于输入密码。


password型的input元素可用的额外属性:

image.png

<input type="password" placeholder ="6 characters " id="password"/>
<!--在提交表单时password型input元素不会对密码加以保护,用户输入的值以明文输入。-->

3、用input元素生成按钮

将input元素的type属性设置为submit、reset、button会生成类似button元素的按钮。

image.png

<input type="submit" value="Submit Vote"/>
<input type="reset" value="Reset Form"/>
<input type="button" value="My Button"/>

用input元素生成按钮与用button元素生成按钮不同之处:button可以用来显示含标记的文字。



4、用input元素为输入数据把关

用于输入受限数据的input元素的type属性值:

image.png

4.1用input元素获取数值

将input元素的type属性设置为number 生成的输入框只接受数值。


number型input元素可用的额外属性:

image.png

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

4.2用input元素获取指定范围内的数值

使用range型input元素


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

4.3用input元素获取布尔型输入

checkbox型input元素会生成供用户选择是或否的复选框


checkbox型input元素可用的额外属性:

image.png

<input type="checkbox" id="veggie" name="veggie"/>

不足:提交表单时,只有处于勾选状态的复选框的数据值会发送给服务器。


4.4用input元素生成一组固定选项

radio型input元素可以用来生成一组单选按钮,供用户从一批固定的选项中作出选择。


radio型input元素可用的额外属性:

image.png


每一个radio型input元素代表着提供给用户的一个选项。要生成一组互斥的选项,只消将所有相关input元素的name属性设置为同一个值。

<fieldset>
<legend>Vote for your favorite fruit</legend>
<label for="apples">   <input type="radio" checked value="Apples" 
id="apples"    name="fave"/>   Apples </label>
<label for="oranges">   <input type="radio" value="Oranges" id="oranges" name="fave"/>   Oranges </label>
<label for="cherries">   <input type="radio" value="Cherries" id="cherries" name="fave"/>   Cherries</label>
</fieldset>


他们的name属性都设置为fave,以便浏览器把它们关联起来。


目录
相关文章
|
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
|
10月前
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
10月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
9月前
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
|
10月前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
10月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`&lt;input type=&quot;tel&quot;&gt;` 用于输入电话号码;`&lt;input type=&quot;time&quot;&gt;` 允许用户选择时间(不带时区);`&lt;input type=&quot;url&quot;&gt;` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
|
10月前
|
移动开发 HTML5
HTML5 新的 Input 类型2
`&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
10月前
|
移动开发 HTML5
HTML5 新的 Input 类型3
`&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。