本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)
label的for属性是和input的id绑定,当我们点击input前面的文本标识会自动聚焦到文本框,例如:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label for="name">用户名</label>
<input type="text" name="name" accesskey="c" id="name" />
<br/>
<a href='./show.php' accesskey="h">去我的主页</a>
</form>
</body>
</html>

这个例子,当我点击用户名的时候,会自动聚焦到文本框里头,也就是光标会自动定位到文本框里


accesskey 属性规定激活(使元素获得焦点)元素的快捷键。

注释:以下元素支持 accesskey 属性:<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

以上示例 : shift+alt+c值 ,可以发现光标聚焦到该input内

shift+alt+h值 ,可以发现页面跳转到该a标签的href地址

---------------------------------------------------------------------------

各种浏览器下accesskey快捷键的使用方法

IE浏览器

按住Alt键,点击accesskey定义的快捷键(焦点将移动到链接),再按回车.

FireFox浏览器

按住Alt+Shift键,点击accesskey定义的快捷键.

Chrome浏览器

按住Alt键,点击accesskey定义的快捷键.

Opera浏览器

按住Shift键,点击esc,出现本页定义的accesskey快捷键列表可供选择.

Safari浏览器

按住Alt键,点击accesskey定义的快捷键.

												

HTML label标签的for属性--input标签的accesskey属性的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  2. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  3. 如何用input标签上传多个图片并回显

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...

  4. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  5. php 处理 form 表单提交多个 name 属性值相同的 input 标签

    一 问题 在公司的开发过程中,遇到了一个问题:如何处理 form 表单提交了多个 name 属性值相同的 input 标签?源码如下(源码是在 form 表单之中的): <!--{loop $a ...

  6. [oldboy-django][2深入django]学生管理(Form)-- 编辑(设置input标签属性,设置input标签默认显示值,设置input的类型)

    1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及sub ...

  7. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...

  8. HTML中强大的input标签属性

    用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...

  9. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

随机推荐

  1. Java集合类学习笔记(Map集合)

    Map用于保存具有映射关系的数据,因此Map集合里保存着两组数据,一组用于保存Map的key,一组用于保存key所对应的value. Map的key不允许重复. HashMap和Hashtable都是 ...

  2. 复利计算软件v3

    #include <windows.h> #include<stdio.h> #include<math.h> void count(){ int a,b; dou ...

  3. 修改oracle占用的8080端口

    Oracle10g在安装完成后,默认占用8080端口,而这个端口也是Tomcat 的默认端口.如果想改Oracle的默认8080端口的话可以这么做: 步骤一:运行cmd,输入sqlplus / as ...

  4. SQLite常用函数

    length(column_name) 取得相应栏位的长度 substr(column_name, start, length) 截取某个栏位相应长度的值

  5. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...

  6. 初学3D Touch

    引言 With iOS 9, new iPhone models add a third dimension to the user interface. A user can now press y ...

  7. android 加载中、无网络、无数据、出错 四种状态的代码封装

    package com.weavey.loading.lib;import android.content.Context;import android.content.res.TypedArray; ...

  8. selenium+python环境搭建

    1.安装python-2.7.3.msi 2.安装pywin32-216.win32-py2.7.exe 3.下selenium包,selenium-2.35.0.tar.gz,放到D:\autote ...

  9. javafx之两种局部界面的呈现方式

    要求: 点击左边不同的按钮,右边红色方框内出现不同的内容 =========================== 第一种实现方法----插入fxml方法: 实现代码================== ...

  10. Dapper学习笔记(1)-开始

    Dapper是一款开源的轻量级ORM工具,源代码下载地址为https://github.com/StackExchange/dapper-dot-net,其具有以下特点: 1.Dapper是一个轻型的 ...