表单对于残障人士来说是最不容易使用的东西。导航和成文的内容是一种情况,而表单域和信息输入的跳跃又是另一回事儿。因此,为表单增加更多元素,使得表单更易用和更具亲和力未尝不是一个是好注意。
标记
每一个表单域都应该有一个自己的标记。label标签挑选出来,跟for属性一起与一个表单元素关联。
Example Source Code [www.52css.com]
<form>
<label for="yourName">Your Name</label>
<input type="text" name="yourName" id="yourName" /> ...
标记为可视化浏览器处理本身使得标记自己可点击增加好处,使相关表单域获得焦点。
注意:name和id两者都是必须的──name为表单处理该表单域,id为标记关联到表单。
分组与图例说明
你可以为表单域分组,比如名字(姓,名,头衔等)或者地址(第一行,第二行,县,地区,邮编,国家等)。使用fieldset标签。
在表单域的分组内,你可以使用legend标签产生图例说明。
注意:可视化浏览器倾向于用围绕在表单组周围的边框来显示,而图例说明打破左上方的边框而显示。
选项分组
optgroup标签用于在一个层叠式选择菜单为选项分类,label属性是必须的,在可视化浏览器中,它的值将会是一个不可选的伪标题,为下拉列表分组。
Example Source Code [www.52css.com]
<select name="country">
<optgroup label="Africa">
<option value="gam">Gambia</option>
<option value="mad">Madagascar</option>
<option value="nam">Namibia</option>
</optgroup>
<optgroup label="Europe">
<option value="fra">France</option>
<option value="rus">Russia</option>
<option value="uk">UK</option>
</optgroup>
<optgroup label="North America">
<option value="can">Canada</option>
<option value="mex">Mexico</option>
<option value="usa">USA</option>
</optgroup>
</select>
导航域
像连接,表单域(和表单分组)需要为没有指点设备(比如鼠标)的用户导航。与连接相同的方法也可以用在表单元素上,使得任务更容易──tab逗留和快捷键。
可以为input和legend等独立表单标签设置accesskey和tabindex属性。
Example Source Code [www.52css.com]
<input type="text" name="firstName" accesskey="f" tabindex="1" />
分享到:
相关推荐
"精美的网站表单样式"着重强调了通过优化表单的视觉效果和交互设计,提升网站的吸引力、亲和力及人性化体验。在本文中,我们将深入探讨如何利用CSS(层叠样式表)来实现这一目标,并结合提供的资源"52css.com_961"...
本主题将深入探讨如何创建美观且功能齐全的HTML `form` 表单,确保用户体验良好,同时满足网站或应用程序的需求。 首先,我们需要了解HTML中的基本`form`元素。`<form>`标签定义了一个表单区域,它包含了一系列的...
在本教程中,我们将探讨如何利用这两者的优势来设计和实现酷炫的form表单。 首先,HTML5引入了新的表单元素和属性,如`<input type="date">`用于日期选择,`<input type="email">`用于邮箱验证,以及`<fieldset>`和...
这个"HTML5简单清新的登录表单"示例是利用HTML5的新特性创建的一个用户界面元素,旨在提供一个既美观又实用的登录体验。下面将详细探讨相关知识点。 1. **语义化标签**:HTML5引入了若干语义化的标签,如`<header>`...
Aspnet Mvc教程 1.说明 01:06 Aspnet Mvc教程 2.准备工作 02:37 Aspnet Mvc教程 3. 建立并运行 02:46 Aspnet Mvc教程 4.默认程序结构 04:18 Aspnet Mvc教程 5. 基本工作流程 05:13 Aspnet Mvc教程 6.mvc理论讲解...
本教程将深入探讨如何利用HTML5的新特性与CSS3的高级样式来构建一个"超酷动态表单",在用户输入时能够实现高亮效果,提升用户体验。 首先,HTML5在表单方面引入了一些新的元素,如`<input type="date">`, `...
HTML 教程---表单设计 HTML 语言基础知识点: 1.1 HTML 语言概述 * HTML 语言是 Hyper Text Marked Language 的简称,译为超文本标记语言。 * HTML 不是一种编程语言,而是一种根据需要把相关信息链接起来的信息...
总的来说,这个教程将引导你掌握HTML5表单的高级用法,理解其新特性,并教你如何配置PHP环境,以便处理来自HTML5表单的数据。通过学习这一系列教程,你将能更深入地理解Web开发,并能够构建交互性强、功能丰富的现代...
7. **JS特效-表单按钮**:标签提到的“JS特效-表单按钮”可能指的是使用JavaScript实现的交互效果,比如按钮的悬停效果、点击反馈、表单提交动画等,这些都提升了表单的整体视觉吸引力。 开发这样的模板需要HTML、...
CSS(Cascading Style Sheets)则用于样式化HTML元素,让表单更具吸引力和易用性。以下是一些常见的CSS技巧: 1. **布局调整**:使用`display: flex`或`grid`布局,可以使表单元素排列更加整齐。 2. **边框与背景**...
本资源提供了6款精美的HTML和CSS样式用户留言表单的源码,这些表单设计独特,既实用又具有视觉吸引力。通过使用这些源码,开发者可以轻松地为自己的网站或应用添加吸引人的用户反馈功能。 首先,我们要理解HTML...
HTML5则引入了一系列新的表单元素和属性,使得网页表单的设计和验证更加便捷。在这个“bootstrap风格的html5表单验证示例”中,我们将深入探讨如何结合这两者来创建高效且用户友好的表单。 1. **HTML5表单元素**:...
"DW笨阿猪高级表单验证"可能是一个专门针对Dreamweaver(DW)用户的插件或教程,旨在帮助开发者实现更复杂、更高效的表单验证功能。 Dreamweaver,作为Adobe公司的一款流行的Web开发工具,通常提供内置的表单验证...
Aspnet Mvc教程 1.说明 01:06 Aspnet Mvc教程 2.准备工作 02:37 Aspnet Mvc教程 3. 建立并运行 02:46 Aspnet Mvc教程 4.默认程序结构 04:18 Aspnet Mvc教程 5. 基本工作流程 05:13 Aspnet Mvc教程 6.mvc理论讲解...
在HTML5之前,表单功能相对有限,而HTML5的出现极大地扩展了这些功能,使得表单不仅在视觉上更具吸引力,而且在用户体验和数据处理方面也有了显著提升。 首先,HTML5引入了一系列新的表单控件类型。例如,`email`...
本教程将深入探讨ASP在HTML环境中的高级应用,旨在帮助开发者提升技能,实现更高效、更复杂的Web功能。 一、ASP基础概念 ASP是基于服务器端的技术,它允许开发者使用多种编程语言(如VBScript、JScript)编写代码,...
HTML 表格与 HTML 表单 HTML 表格是 HTML 中的一种基本结构元素,用于组织和显示数据。HTML 表格由多个表格单元格组成,每个单元格可以包含文本、图像、表单元素等内容。HTML 表格的基本结构由 `<table>` 标记定义...
《30天打造更亲和力网站》这本书旨在帮助读者理解并实施网站亲和力设计,从而提升用户体验。亲和力网站设计,也被称为无障碍设计,是确保所有用户,包括那些有特殊需求或使用辅助技术的人,都能方便地访问和使用网站...