HTML超文本标记语言(九)——表单输入类型

1、<inpur type="text">:定义供文本输入的单行输入字段;

2、<input tyope="password">:定义密码字段。password字段中的字符会被做掩码处理(显示为星号或实心圆);

3、<input type="submit" value="submit">:定义提交按钮,将表单数据提交至表单处理程序。若省略value属性,按钮以中文“提交”显示;

4、<input type="radio">:定义单选按钮。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br/>
<input type="radio" name="sex" value="female">Female
<br/><br/>
<input type="submit">
</form>

5、<input type="checkbox">:定义复选框。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br/>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br/><br/>
<input type="submit">
</form>

6、<input type="button">:定义按钮。

<input type="button" value="按我!" onclick="alert(‘Hello World!‘)">
<button input="button" onclick="alert(‘Hello World!‘)">Click Me!</button>

感受下<input>元素button属性和<button>元素的区别。

HTML5增加了多个新的输入类型:

7、<input type="number">:用于应该包含输入数字值的输入字段。可以通过属性对数字做出限制。

<form>
Quantity(between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit" value="提交查询内容">
</form>

8、<input type="date">:用于应该包含日期的输入字段。可以利用min、max等对日期进行限制。根据浏览器支持,日期选择器会出现在输入字段中。

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

9、<input type="color">:用于应该包含颜色的输入字段。根据浏览器支持,颜色选择器会出现在输入字段中。

<form>
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>

10、<input type="range">:用于应该包含 一定范围内的值 的输入字段。根据浏览器支持,输入字段能够显示为滑块控件。可以使用min、

max、step、value属性来规定限制。

<form>
Points:
<input type="range" name="points" min="0" max="10" step="5">
<input type="submit">
</form>

11、<input type="month">:允许用户选择月份和年份。根据浏览器支持,日期选择器会出现在输入字段中。

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

12、<input type="week">:允许用户选择周和年。根据浏览器,日期选择器会出现在输入字段中。

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

13、<input type="time">:允许用户选择时间(无时区)。根据浏览器支持,时间选择器会出现在输入字段中。

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

14、<input type="dtetime">:允许用户选择日期和时间(有时区)。根据浏览器支持,日期选择器会出现在输入字段中。

15、<input type="datetime-local">:允许用户选择日期和时间(无时区)。根据浏览器支持,日期选择器会出现在输入字段中。

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

17、<input type="search">:用于搜索字段(搜索字段的表现类似常规文本字段)。

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

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

时间: 2024-10-17 17:39:21

HTML超文本标记语言(九)——表单输入类型的相关文章

html(HyperText Markup Language)--超文本标记语言

1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** 标记:html所有的操作都是通过标记实现的,标记就是标签,<标签名称>: ** 网页语言. * 第一个html程序. - 创建java文件.java ** 先编译,然后再运行(jvm) - html后缀是 .html .htm ** 直接通过浏览器就可以运行 - 代码 ** 这是我的<fon

HTML(超文本标记语言)

HTML作为超文本标记语言,相对其他语言来说比较简单,但功能还是很强大.通常用来网页制作等.当然还有其他用途,自己可以去百度了解. 以下为归纳的知识点,比较实用. 标记 类型 译名或意义 作 用 备注 文件标记         <html> ● 文件声明 让浏览器知道这是 html 文件   <head> ● 开头 提供文件整体资讯   <title> ● 标题 定义文件标题,将显示于浏览顶端   <body> ● 本文 设计文件格式及内文所在   排版标记

超文本标记语言HTML

介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打

HTML超文本标记语言的介绍

一.概念 1.定义 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部分. 简而言之:一种为普通文件中某些字句加上标示的语言,其目的在于运用标记(tag)使文件达到预期的显示效果. 解释:HTML 是在 SGML 定义下的一个描述性语言,或可说 HTML 是 SGML 的一个应用程式,HTML 不是程式语言,如 C++ 和 Java 之类,它只是标示语言,基本上你只要明白了各种 标记的用法便算学懂了 HTML,HTML 的格式非常

HTML(超文本标记语言)的内容和理解

由于上篇文章中提到WebMethod的Description 属性(propery)中可以使用超文本,因此就记录一篇关于超文本的文章以供参考,注意:Description=" HTML格式 "; 主要内容转自 https://deerchao.net/tutorials/html/html.htm 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比"文本"更丰富的意义,

HTML:Hyper Text Markup Language 超文本标记语言

1.HTML是什么? *Hyper Text Markup Language 超文本标记语言 *Hyper Text:超链接.把不同空间的资源,整合在一起,形成逻辑上的网状结构. *Markup Language 标签语言.该语言是由标签构成. *HTML文档=网页 *浏览器解析HTML 2.如何创建一个HTML文档 . *后缀名:.html .htm 都可以; *由作为文档的根元素,文档包含两部分.头部分和体部分 *body中的信息在浏览器正文中显示 *head中的信息不会在正文中显示. 3.

html5知识点:超文本标记语言编程

超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括"头"部分(英语:Head).和"主体"部分(英语:Body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容. 详细介绍 1.由来 万维网上的一个超媒体文档称之为一个页面(外语:page).作为一个组织或者个人在万维网上放置开始点的页面称为主页(外

超文本标记语言

这是我第一次在博客园写东西,通过这两天的学习,初步了解了什么是html,之前浏览网站时也查看过网页的源代码,给人的印象就是杂乱无章,什么也看不懂,现在看起来不那么乱了,知道它也是有头有尾的,也是有相应的结构在里面,head表示它的头,body表示身体部分,当有了身体内容后就需要给它定义样布局的css,最后还需要用js来输入行为命令,才能成为一个完整的网页.当了解了这些东西之后才能更好地学习下去,接下来会更进一步的探索超文本标记语言.

超文本标记语言--Html

高端大气上档次的网页,低调奢华有内涵的界面,都是由静态网页和一些动态效果,插入的视频,和flash等组成,不得不说,静态网页的制作,是学习网页的必经之路,可见静态网页在学习网页的前端是十分重要.静态网页主要是通过html制作.简单来说html是一种超文本标记语言,静态网页也是由,html的标记和标记中的属性,体现出来,打开你喜爱的网络浏览器,在浏览器的地址输入框内敲入相关网址,进入Active Server Pages的网点(你的计算机应该已连上了Internet).当在屏幕上显示了此网页后,从