在HTML5中自动设置Form的焦点 - 星云互动 - ITeye博客

`

zlpx

浏览: 156458 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

f308185993： 123123[size=xx-small][color=dar ...
在HTML的text input控件获取焦点时设置背景颜色
crackajack_zg： good ，很简单的代码、
用JQuery改变图片的透明度
qq184234675：求jquery1.9+的
用JQuery改变图片的透明度
demonzoo：很奇怪，我刚试了无数次，在本地直接打开就是无法弹出提示。后来我 ...
用HTML5产生操作系统通知
demonzoo：为什么我在chrome下无法显示通知内容，无论按哪个按钮都是弹 ...
用HTML5产生操作系统通知

在HTML5中自动设置Form的焦点

博客分类：

HTML5

阅读更多

下面的例子展示了你如何在HTML5中设置Form的焦点。通过设置autofocus属性。

<!DOCTYPE html>
<html>
<head>
    <title>Autofocusing a form input text control in HTML5</title>
</head>
<body>
 
    <form>
        <label for="usernom">Username:</label>
        <input id="usernom" type="text" autofocus /><br/>
 
        <label for="passwrd">Password:</label>
        <input id="passwrd" type="password" /><br/>
 
        <input type="reset" value="Reset" />
        <input type="submit" value="Log in" />
    </form>
 
</body>
</html>

源码下载：

autofocusing-a-form-input-text-control-in-html5.zip

分享到：

在HTML5中定制数据属性 | 用CSS3设置P的对齐方式

2012-03-28 11:40
浏览 2796
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

美观又功能齐全的HTML form表单: 为了增加表单的功能性，我们可以使用HTML5的`placeholder`属性提供提示文本，使用`autofocus`属性让特定输入框自动获取焦点，或者使用`disabled`属性禁用某些选项。还可以利用`<fieldset>`和`<legend>`组织表单内容...

form表单中的onblur事件: 在网页开发中，表单（Form）是用户与页面交互的重要元素，用于收集用户输入的信息。在HTML中，我们可以利用各种事件来控制表单元素的行为，`onblur`事件就是其中之一。`onblur`事件是当用户焦点离开某个元素，比如...

HTML5FormAttributes(Part1)共8页: "HTML5FormAttributes(Part1)共8页"这个压缩包文件很可能是关于HTML5中表单属性的一个教程或文档，虽然没有提供具体内容，但我们可以根据已知的标签"HTML5FormAttribu"来深入探讨HTML5中的一些关键表单属性。...

HTML元素设置焦点的方法: 此外，HTML5引入了`autofocus`属性，使得无需JavaScript就能在页面加载时自动将焦点设置到特定元素。只需在元素标签中添加`autofocus`，如下所示： ```html ``` 这种方式适用于不支持JavaScript或者需要优化无...

App应用注册页面form模板-应用注册 app 登陆 css3 html5 form.rar: 在现代Web开发中，HTML5和CSS3是构建交互式和动态用户界面的关键技术。针对“App应用注册页面form模板-应用注册 app 登陆 css3 html5 form.rar”这个资源，我们可以深入探讨如何利用HTML5和CSS3来创建一个高效、...

后台登陆页HTML5网页模板_后台登陆 login form.rar: 这篇文档将深入解析“后台登陆页HTML5网页模板_后台登陆 login form”这一资源，主要涵盖HTML5技术在后台登录界面设计中的应用，以及如何构建一个高效、安全且用户体验良好的登录表单。 HTML5是现代网页开发的核心...

如何防止INPUT按回车自动提交表单FORM: 在网页设计中，表单（`<form>`）是用户与服务器进行交互的重要元素，而输入框（`<input>`）则是用户输入数据的主要界面组件。然而，浏览器默认的行为是，当用户在单个输入框中按下回车键时，会触发表单的提交事件。...

HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法: 综合这些示例，我们可以看到HTML5为form标签带来的不仅仅是表单验证和文件上传的便利，它还在前端交互中引入了新的拖放机制，提升了用户体验。然而，正如文档内容所提到的，虽然这些新技术在功能上非常强大，但在...

HTML5&CSS3网页制作：Input元素的其他属性.pptx: 在HTML5中，Input元素扮演着至关重要的角色，它用于创建各种类型的表单控件，如文本输入框、密码框、按钮等。本篇主要讲解Input元素的一些重要属性及其用途。 1. autofocus属性： autofocus属性允许页面加载后自动...

html5 可伸缩搜索框动画效果源码下载: 为了实现更丰富的交互，开发者可能会使用HTML5的`placeholder`属性来设置搜索框的提示文本，以及`autofocus`属性让搜索框在页面加载时自动获取焦点。此外，可能还有`required`属性来验证用户是否输入了内容，防止...

把输入焦点指定到组件上: 3. 在事件处理程序中设置焦点：有时我们希望在特定事件发生后，比如页面加载或用户点击某个按钮后，才将焦点转移到特定元素。这可以通过在事件处理函数中调用`focus()`方法实现。例如，在按钮被点击后，将焦点移动到...

javascript自动切换焦点控制效果完整实例.docx: 假设我们需要在一个表单中实现这样的功能：当用户在一个文本框中输入完最大长度的字符后，自动将焦点转移到下一个文本框。这样可以避免用户手动使用鼠标或Tab键来切换输入框，从而提高输入效率和用户体验。 #### 三...

HTML5表单中新增的input属性1案例.pdf: 在案例1中，`<input>`元素的`autocomplete="on"`设置表示浏览器将根据用户的历史输入数据提供自动完成建议。例如，当用户在`<input>`标签`id="city"`的文本框中开始输入时，浏览器会显示一个下拉列表，列出预先定义...

HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段).zip: 在这个“HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)”项目中，我们将深入探讨如何利用这两者来创建一个具有高级特性的登录界面。首先，HTML5作为最新的超文本标记语言版本，引入了许多新元素和...

HTML5表单中新增的input属性1.pdf: form属性是HTML5中一个重要的新特性，它允许input元素关联到一个或多个表单，即使input元素不在form标签内部。通过指定form属性的值为相关表单的id，可以实现跨元素的关联。这增强了表单结构的灵活性。例如： ```...

疯狂HTML5、CSS3、Javascript讲义---HTML5部分.doc: 以下将详细讲解HTML5中的关键元素、属性以及拖放API和表单相关特性。 HTML5保留并增强了原有的HTML属性，同时引入了许多新的属性。例如，`form`属性允许表单控件独立于`<form>`元素，提高了布局灵活性。`autofocus`...

HTML5（软件品牌）-1期 13 教学课件_单元5_HTML5的input属性.pdf: 在HTML5中，input元素不仅新增了多种输入类型，还增加了一些属性，以提供更丰富的功能和更好的用户体验。 1. autocomplete属性： autocomplete属性用于控制表单或输入字段的自动填充功能。当设置为"on"时，浏览器...

HTML5+CSS3炫酷的手机登陆界面: 在这个“HTML5+CSS3炫酷的手机登录界面”项目中，我们将探讨如何利用这两种技术来创建一个吸引人的移动端登录界面。首先，HTML5是超文本标记语言的第五版，它引入了许多新特性，旨在使网页开发更简洁、更具可扩展...

HTML5-input表单控件调用代码_html5_表单_input_代码_控件_: HTML5是现代网页开发的重要标准，它在许多方面对HTML4进行了扩展和增强，尤其是在表单元素和输入控件方面。HTML5的`input`标签是构建交互式表单的关键，提供了更多的类型、属性和事件，让开发者可以创建更加丰富和...

html仓库管理系统登录模板(可手机): 同时，考虑到移动设备的输入便捷性，模板可能还采用了HTML5的`autofocus`属性，使输入框在页面加载时自动获取焦点，方便用户快速输入。总的来说，HTML仓库管理系统登录模板充分利用了HTML5的新特性，提供了一种...

Global site tag (gtag.js) - Google Analytics