HTML4基础

                                                                        form 表单

首先,讨论“控件”(下面很多都是新控件,如果浏览器不支持,它将会显示文本框)
1.文本框
2.复选框
3.下拉菜单
4.文件选择器
5.按钮(submit按钮、reset按钮、push按钮)
6.隐藏按钮

大多数控件用input元素创建,在元素里用type特性定义创建的类型控件
如:
<form>
<input type="button(可单击的按钮)/ checkbox(复选框)/ color(颜色选择器)/ date(日期选择器)/ datetime(日期和时间选择器)/ datetime-local(仅用于本地时间的日期和时间选择器)/ email(电子邮件文段)/ file(文件选择器)/ hidden(隐藏字段)/ image(可单击的图片)/ month(月份和年份选择器) / number(数值输入框)/ password(密码框)/ radio(单选按钮)/ range(带有滑块的数值输入框)/ reset(复位按钮)/ search(搜索框)/ submit(提交按钮)/ tel(电话号码输入框)/ text(单行文本框)/ time(时间选择器)/ url(URL框)/ week(星期和年份选择器)">
</form>

搜索框

<input type="search" name="search" placeholder="Enter search terms here" size="50">

支持搜索框的浏览器把搜索框呈现为圆角效果,以区别普通文本框

多行文本框

<textarea name="comments" ></textarea>

定义文本框的大小,可使用cols 和rows

radio单选按钮
对于单选按钮,name和value特性十分重要,只有正确处理这两个特性,单选按钮才能正确发挥作用,如果想要在一组选择按钮中选择一个,每个按钮的name特性必须一样,当然也可以直接在input标记里添加checked特性,此处标记已经选择,你也可以选择其它

时间

<form>
what is your birthdays?<br/>
<input type="data" ><br /><br />
when would you like your serive to begin <br />
<input type="daytime" ><br /><br />
please specify the date and time of the meeting :><br/>
<input type="datetime-local" ><br /><br />
please specify which month you would like to volunteer in the nursery:<br/>
<input type="week" ><br /><br />
please specify your desired appointment time :<br />
<input type="time" ><br />
</form>

当前很少的一些浏览器支持所有这些控件,但是这些控件可以“优雅” 的退化,我们依然可以在文本框输入月份或日期或时间。

其它数值输入控件

<input type="number" min="0" max="12" step="2" value="8">
<input type="range" min="0" max="12" step="1" value="5" >

联系方式

<input name="email" type="email">
<input name="website" type="url">
<input name="phont" type="tel">

选择/下拉菜单

<form>
<select name="FavoriteColor" size="3">
<option value ="blue" >blue </option>
<option value="red" >red</option>
<option value="yellow" >yellow</option>
<option value="green" >green</option>
<option value="other" >other</option>
</select>
</form>

注:用户可以从列表中选择一个选项,如果想要一次选择多个选项,可在开始标记<select>中添加multiple特性,例如:

<select name="FavoriteColor" size="3" multiple>

子菜单(已经在前面有提及过)

按钮(按钮和表单交互使用)
submit/reset/button(单击这个按钮将会触发一个行为或一个事件,执行之前定义的一个脚本或者函数)

<input type="submit " value="submit">

或者

<button type="submit" value="submit">
时间: 2024-10-12 15:47:39

HTML4基础的相关文章

html4基础知识梳理

基础的html知识,只放Xmind的截图. 第一部分: 第二部分: 某些标签的使用示例及注意事项,在印象笔记里.

HTML5学习笔记----html5与传统html区别

一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中,刻意不使用版本声明,一份文档将会适用于所有版本的HTML. 从HTML5开始,对于文件的字符编码推荐使用UTF-8. HTML5确保了与之前HTML版本的最大程度的兼容性. 为了保证兼容性,需从元素说起,在HTML5.中,元素的标记可以省略.其体来说,元素的标记分为“不允许写结束标记”.“可以省略

使用 svg(Scalable Vector Graphics)绘制前端图表的注意事项以及小技巧

1. 图形的边框(即stroke): 一半在图形内部,一半在图形外部,当 stroke-width 很宽时,在设置 图形坐标时需要注意这点. 2. IRI (Internationalized Resource Identifier, 比 uri 更通用的一种资源标记方法) 和 FuncIRI 的区别: svg 里面会看到两种 标记资源的方法: some_iri , url(some_iri) FuncIRI 就是把 一个 iri 用 url( ) 括起来,其作用就是明确告知使用者 括号里面的内

W3C理解

做网站开发有两种标准选择,支持W3C标准或是支持IE,因为IE很多地方不兼容W3C,就是说,你的网站按照W3C开发,IE显示就会有问题,你按IE开发,那么一方面IE6,7,8几个版本自己之间也不兼容,另一方面,用其它浏览器的人,如firefox,opera,chrome的人,看你的网站也会有问题,所以应该支持W3C标准. 为什么要使用W3C标准规范? 每当浏览器发布大更新的时候,我们刚建立不久的网站很可能就会发生无法预知的错误,我们只能重新建立或改版网站,使其可以应对新发布的浏览器.而当有新的网

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

前端基础(一)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000;

前端知识学习一 :CSS基础

一.CSS概述 css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中, 把样式添加到HTML4.0中,是为了解决内容和表现分离的问题.外部样式表通常存储在css文件     中.多个样式定义可层叠为一. 二.层叠次序 一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权. 1.浏览器的缺省设置 2.外部样式表(通过引入的外部.css文件) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) 因此属性的优先

回归基础从新认识——HTML+CSS

前言 这段时间工作没那么繁杂,索性就想说来套系统的学习,之前去面试的时候,有被问及些基础的知识,居然回答不上来,也不能说是回答不上吧,回答的不全面.前端群上问了那个机构比较好,选择了慕课网.看了一段时间还是觉得不错的. HTML 语义化标签 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 文章常用 <p>,添加段落 <hx>,h1.h2.h3.h4.h5.h6,添加标题 <strong>和<em>,但两者在强调的语气上有区别:<e

HTML 基础

1.HTML 简介 W3C(World Wide Web Consortium),W3C 组织,万维网联盟,这个组织制订网页标准.W3C 标准不是一个标准,而是一系列的标准的集合,包含三部分的标准:结构标准,表现标准和动作标准,与结构标准对应的是 HTML,与表现标准对应的是 CSS,与动作标准对应的是 JavaScript. HTML 指的是超文本标记语言:Hyper Text Markup Language.HTML 不是一种编程语言,而是一种标记语言.标记语言是一套标记标签 (markup