[HTML5]定制input元素(下)

简介: [HTML5]定制input元素

目录


   4.5、用input元素获取有规定格式的字符串


   4.6、用input元素获取时间和日期


   4.7、用input元素获取颜色值


5、用input元素获取搜索用词


6、用input元素生成隐藏的数据项


7、用input元素生成图像按钮和分区影响图


8、用input元素上传文件



4.5、用input元素获取有规定格式的字符串

type属性设置为:email、tel、url的input元素能够接受的输入数据为有效的电子邮箱地址、电话号码和URL


email型、tel型和URL型input元素可用的额外元素:

image.png


⚠️email型input元素还支持multiple属性-可以接受多个电子邮箱地址。


<input type="email"  placeholder="user@domain .com"  id="email"  name="email"/>
<input type="tel"  placeholder="xxx-xxx-xxx"  id="tel"  name="tel"/>
<input type="url "  id="url"  name="url"/>

所有主流浏览器都支持email型input元素,而url型input元素不一定,对tel型input元素的支持最差。


4.6、用input元素获取时间和日期

image.png


用于输入日期和时间的input元素可用的额外属性:


image.png


<input type ="date" id="last" name="last"/>

4.7、用input元素获取颜色值

color型input元素只能用来选择颜色。


input元素中的颜色值以7个字符的格式表示:以#开头➕三个两位十六进制数(分别代表红绿蓝三种原色的值。)


<input  type="color"  id="color"  name="color"/>

5、用input元素获取搜索用词

search型input元素会生成一个单行文本框,供用户输入搜索用词。


<input type="search"    id="search"  name="search"/>

6、用input元素生成隐藏的数据项

hidden型的input元素用法:使用一些用户看不到或不能编辑的数据项,但又要求提交表单时也能将其发送给服务器。


<input type="hidden" name="email"  value="1234"/>

⚠️只有那些出于方便或易用性考虑而不是因为机密或涉及安全原因需要隐藏的数据才适合使用这种input元素。


7、用input元素生成图像按钮和分区影响图

image型input元素生成的按钮显示为一幅图像,点击它可以提交表单。


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

image.png

<input type="image" src="Accept .png" name="submit"/>

在发送的数据中包括来自那个image型input元素的两个数据项,它们分别代表用户点击位置相对于图像左上角的x坐标和y坐标。


8、用input元素上传文件

file型input元素:可以在提交表单时将文件上传到服务器。


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

image.png

<input type=" file"   name="filedata"/>


目录
相关文章
|
2月前
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
|
2月前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
2月前
|
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` 按钮以方便输入。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型2
`&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型3
`&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`&lt;input type=&quot;color&quot;&gt;`允许用户通过颜色选择器选取颜色,而`&lt;input type=&quot;date&quot;&gt;`则提供了一个日期选择器来方便用户选择日期。
|
1月前
|
Web App开发 移动开发 iOS开发
HTML5 语义元素1
HTML5引入了语义元素,如`&lt;nav&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`&lt;div&gt;`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`&lt;section&gt;`标签用于定义文档中的节,而`&lt;article&gt;`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。

热门文章

最新文章