• 售前

  • 售后

热门帖子
入门百科

HTML5注册表单的自动聚焦与占位文本示例代码

[复制链接]
gui57 显示全部楼层 发表于 2021-10-25 20:01:20 |阅读模式 打印 上一主题 下一主题
起首看下面要使用HTML主动聚焦和占位文本的示例代码

复制代码代码如下:
<!DOCTYPE html> 2: <html>
<head>
<title>注册帐号</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="goto">
<fieldset id="register_information">
<legend>新用户注册</legend>
<ol>
<li>
<label for="name">邮 箱</label>
<input type="email" id="name" name="name">
</li>
<li>
<label for="user"> 用户名</label>
<input type="text" id="user" name="user">
</li>
<li>
<label for="nickname"> 显示名称</label>
<input type="text" id="nickname" name="user">
</li>
<li>
<label for="password">暗码</label>
<input type="password" id="password" name="user_password">
</li>
<li>
<label for="confirm_password">确认暗码</label>
<input type="password" id="confirm_password" name="user_password">
</li>
</ol>
</fieldset>
</form>
</body>
</html>

使用主动聚焦
要使用HTML5的主动聚焦功能,只必要在表单域中添加autofocus属性即可
例如上面,想让页面加载完成时主动将光标定位到表单的第一个表单域邮箱上以及进步输入服从。

复制代码代码如下:
<li>
<label for="name">邮 箱</label>
<input type="email" id="name" name="name" autofocus>
</li>


必要注意的是,如果页面中设置了多个autofocus属性,那么用户的光标只会定位到末了一个设置了autofocus属性的表单域上。
使用占位文本
占位文本的最大用处,就是向用户阐明应该如何正确的填写表单。即进行输入提示。要使用占位文本的话,只必要在输入域中添加placeholder属性即可
下面是使用了placeholder属性的输入表单域

复制代码代码如下:
<ol>
<li>
<label for="name">邮 箱</label>
<input type="email" id="name" name="name" autofocus placeholder="请输入有效的邮件地址">
</li>
<li>
<label for="user"> 用户名</label>
<input type="text" id="user" name="user" placeholder="输入用户名">
</li>
<li>
<label for="nickname"> 显示名称</label>
<input type="text" id="nickname" name="user" placeholder="输入昵称">
</li>
<li>
<label for="password">暗码</label>
<input type="password" id="password" name="user_password" placeholder="输入暗码">
</li>
<li>
<label for="confirm_password">确认暗码</label>
<input type="password" id="confirm_password" name="user_password" placeholder="再次输入暗码">
</li>
</ol>

运行效果如下

是否启用主动完成
在HTML5中引入了autocomplete属性。用来通知欣赏器是否为当前表单域主动填凑数据。某些欣赏器会记住用户之前输入的数据,而在某些情况下,我们大概并不盼望用户使用记录数据,特殊雷同于暗码这一类的
关闭主动完成

复制代码代码如下:
<input type="password" id="password" name="user_password" autocomplete="off" placeholder="输入暗码">

只必要将atuocomplete的值设置成off,就可以克制主动完成。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作