HTML+CSS3自学笔记（HTML篇 表单属性）autocomplete + target + value + autofocus + disabled + readonly 属性

于 2022-07-14 14:53:03 发布
阅读量507 收藏
点赞数
分类专栏： 前端自学笔记（HTML+CSS） 文章标签： html 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53659971/article/details/125776775
版权

本文章仅用于学习，未经同意请勿转载

本文章为0基础自学笔记，文章略显粗略，如有错误，希望大家指正，感谢！

自学来源：

绿叶学习网（HTML入门教程）
菜鸟教程（学习HTML）
B站小甲鱼《零基础入门学习Web开发》（HTML5&CSS3）

一、自动填充

        每当我们在浏览器中录入自己的信息时，浏览器将会自动记录表单的数据。这是因为autocomplete属性默认是“on”，即默认允许浏览器自动填充，想要关闭只需在form元素中修改为“off”即可

最低0.47元/天 解锁文章
葡萄软糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
autocomplete css + js
10-09
autocomplete 所需css+js
autocomplete插件使用的js及css
08-08
autocomplete需要的插件js及css
autocomplete-css
小雪驿站
10-27 1637
.outer_content_div{    border:1px solid black;    background-color:#6CA359;    width:320px;    height:310px;       }   .qq_div{    margin:2px;    padding:7px;    border:1px solid b
CSS修改Autocomplete样式
weixin_30457065的博客
09-22 2674
举个场景：在用户登录成功的时候，浏览器有时候会咨询你是否记住密码，当你记住密码下次登录的时候，标签会自动填充，但是这样会造成样式不统一，解决办法如下： input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea...
jquery的autocomplete 自动完成使用自己的css
robinhunan的博客
12-31 7431
jquery autocomplete的自动完成插件，功能比较全，也比较好用。但是大部分时候，还是想使用自己的样式，以保持风格一致。 下面的代码展示了，使用自己的css，展示自动完成效果。
HTML+CSS及表单知识 软件条件：VSCode、Goole浏览器
03-13
4 、使用input标签的autocomplete属性实现内容自动记忆补全 步骤： 步骤一：首先建立一个div-contain，里面放背景图片div-pic、标语div-topic和注册框div-sign三个div，因为图片较大且想让图片固定故将pic设置为...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-10 autocomplete属性
最新发布
01-24
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第4章 HTML5表单的应用 例4-10 autocomplete属性
60套HTML5+CSS3后台管理登录模板
01-11
2. **CSS3增强**：CSS3不仅扩展了选择器，使得我们可以更精确地定位元素，还引入了如`border-radius`（圆角）、`box-shadow`（阴影）和`background-image`（背景图片）等属性来提升设计效果。过渡和动画效果如`...
HTML+CSS实现单选框、复选框美观的样式
09-24
例如，对于单选框，我们可以使用`<input>`标签，将其`type`属性设置为`radio`。通常，我们会将实际的单选框隐藏，通过CSS来显示自定义的图形元素。例如： ```html <input type="radio" autocomplete="off" name...
整理HTML5中表单的常用属性及新属性
11-30
HTML5 新的表单属性HTML5 的 <form> 和 <input>标签添加了几个新属性.<form>新属性：autocompletenovalidate<input>新属性：...
jquery.autocomplete.js&css.rar
05-22
jquery.autocomplete.js 、jquery.autocomplete.css
让输入框关闭自动完成（AutoComplete）功能
12-01
现在我们可以用input的一个属性autocomplete。 这是一个关闭自动完成的示例： <input type="text" name="test" autocomplete="off" /> 　　这个属性虽然不属于XHTML标准，但IE以及Mozilla都支持，也许不久后也会加入到标准当中吧。
CSS3-关于input框autocomplete开启后 input框补全后默认背景颜色
weixin_44622984的博客
07-07 2146
今天在开发过程中碰到了这样的情况,input框在我设置好样式后,我点击进行输入值,一旦我选择自动补全(及它弹出的下拉框中的以前填过的数据),就会出现默认的背景颜色,极容易影响整体框体效果 如: 出现的这个默认背景颜色很影响整体效果,于是要进行清除,最终查到了input有个属性设置,设置如下即可清除 input:-internal-autofill-previewed, input:-internal-autofill-selected { transition: background-color 5
css javascript autocomplete
闲谈
12-20 122
&lt;html&gt;    &lt;head&gt;        &lt;style&gt;            #belowDiv {                border : solid 1px;                background-color:red;            }            #bigDiv {                margin...
html中input标签type=text的只读属性readonly和autocomplete
热门推荐
EnjoyInwind的专栏
02-18 4万+
1.输入框里只要readonly属性写出来，不管其值是readonly还是其他值或者空，输入框中的值均不允许改变。 2.autocomplete属性为off可屏蔽历史输入框。
autocomplete 属性规定输入字段是否应该启用自动完成功能。
关注前端开发
08-08 981
定义和用法 autocomplete 属性规定输入字段是否应该启用自动完成功能。 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 注释：autocomplete 属性适用于 &lt;form&gt;，以及下面的 &lt;input&gt; 类型：text, search, url, telephone, email, pa...
html5之autocomplete
a20001999的博客
03-13 227
比如有一个文本框，当为autocomplete为on时，会启用一个提示功能，会显示你之前填过的东西，如果为off，则不会显示你之前写过的
input文本输入框自动提示-autocomplete
一万年太久，只争朝夕
09-18 2890
首先来说，由于作者刚接触网站的开发，这篇文章写得有点乱，主要是记录给自己看的，怕以后忘记了，方便到时候查阅，若给您带来了不便，还请见谅。若有什么建议，请留言。非常感谢。 --------------------------------------------步入正题-------------------------------------------- 问题（目标）：目标样式如图1所示，当在文本框中输入字符时，实时进行提示相关信息，供用户参考和选择。 **分析：**那么这个功能该如何实现呢，jQuery提
表单 属性 autocomplete
$_摸不着头脑_
08-26 761
1.什么时候需要使用autocompete 属性      有个input 标签 type属性为checkbox,  当你勾选这个选项后, 在按F5键刷新页面,      会发现这个input 的checked 属性被缓存了. 默认的 autocomplete功能是开启的      autocmplete="on", 如果不想缓存把autocomplete设置为off即可. 2.知识点:h
vue3+autocomplete
12-26
Vue 3中的Autocomplete组件可以通过使用第三方库或自定义组件来实现。以下是一个使用Vue 3和Element Plus库实现Autocomplete的示例： ```vue <template> <el-autocomplete v-model.trim="groupName" :fetch-suggestions="querySearchGroup" :clearable="true" placeholder="请输入" :trigger-on-focus="false" @select="handleGroup" ></el-autocomplete> </template> <script> import { ref } from 'vue'; import { useAutocomplete } from 'vue-autocomplete'; export default { setup() { const groupName = ref(''); const { querySearchGroup, handleGroup } = useAutocomplete(); return { groupName, querySearchGroup, handleGroup }; } }; </script> ``` 在上面的示例中，我们使用了Vue 3的Composition API来设置组件。我们使用了`ref`函数来创建一个响应式的`groupName`变量，并使用`useAutocomplete`自定义hook来处理自动完成的逻辑。`querySearchGroup`函数用于获取建议列表，`handleGroup`函数用于处理选择事件。 请注意，上述示例中使用了Element Plus库的`el-autocomplete`组件，你需要先安装Element Plus库并在项目中引入。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值