编程笔记 html5&css&js 026 HTML输入类型(2/2)

简介: 编程笔记 html5&css&js 026 HTML输入类型(2/2)


本节介绍HTML输入类型。也就是<input> 元素type属性的可以使用的值。这在桌面程序中是通过不同的控件实现的。

输入类型:date

<input type="date"> 用于应该包含日期的输入字段

根据浏览器支持,日期选择器会出现输入字段中。

<form>
  Birthday:
  <input type="date" name="bday">
</form>
<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

输入类型:color

<input type="color"> 用于应该包含颜色的输入字段。

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

输入类型:range

用于应该包含一定范围内的值的输入字段。

<form>
  <input type="range" name="points" min="0" max="10">
</form>

您能够使用如下属性来规定限制:min、max、step、value。

输入类型:month

允许用户选择月份和年份。

根据浏览器支持,日期选择器会出现输入字段中。

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

输入类型:week

<input type="week"> 允许用户选择周和年。

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

输入类型:time

允许用户选择时间(无时区)。

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

输入类型:datetime

允许用户选择日期和时间(有时区)。

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

输入类型:datetime-local

<input type="datetime-local"> 允许用户选择日期和时间(无时区)。

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

输入类型:email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型,并在键盘增加 “.com” 以匹配电子邮件输入。

<form>
  E-mail:
  <input type="email" name="email">
</form>

输入类型:search

·· 用于搜索字段(搜索字段的表现类似常规文本字段)。

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

输入类型:tel

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

输入类型:url

<input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持,在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型,并向键盘添加 “.com” 以匹配 url 输入。

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

练习

<!DOCTYPE html>
<html lang="zh-cn">
    <title>编程笔记 html5&css&js 输入类型</title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    </style>
    <body>
        <div class="container">
            <form method="post" name="invest" enctype="text/plain">
                姓名: <input type="text" name="username" size="20" /> <br />
                网址: <input type="text" name="URL" size="20" maxlength="50" value="" />
                <br />
                密码: <input type="password" name="password" size="20" maxlength="8" /> <br />
                确认密码: <input type="password" name="qurpassword" size="20" maxlength="8" />
                <br />
                请选择你喜欢的音乐: <input type="checkbox" name="m1" value="rock" /> 摇滚乐
                <input type="checkbox" name="m2" value="jazz" /> 爵士乐
                <input type="checkbox" name="m3" value="pop" /> 流行乐 <br />
                请选择你居住的城市: <input type="radio" name="city" value="beijing" /> 哈尔滨市
                <input type="radio" name="city" value="shanghai" /> 长春市
                <input type="radio" name="city" value="nanjing" /> 沈阳市 <br />
                <input type="submit" name="submit" value="提交表单" />
            </form>
        </div>
    </body>
</html>

小结

在实际项目中,根据现实业务需要,回头再详细了解HTML输入类型也是可以的。

相关文章
|
1天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
10 0
|
2天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
2天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
4天前
|
移动开发 API UED
html5和css3
【5月更文挑战第26天】html5和css3
14 2
尚硅谷html5+css3(4)浮动
尚硅谷html5+css3(4)浮动
|
6天前
|
前端开发
尚硅谷html5+css3(3)布局
尚硅谷html5+css3(3)布局
|
6天前
|
缓存 前端开发 JavaScript
尚硅谷html5+css3(2)CSS5基本知识
尚硅谷html5+css3(2)CSS5基本知识
|
6天前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
7天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
14 1
|
15天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
29 0
HTML5/CSS3粒子效果进度条代码