input placeholder required ：为表单项加上默认的文字提示和必填属性

最新推荐文章于 2023-04-23 17:27:08 发布
最新推荐文章于 2023-04-23 17:27:08 发布
阅读量815 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/robotli/p/5784066.html
本文介绍HTML中使用placeholder属性作为输入框提示文本的方法，并强调其对于密码框的应用价值。此外，文章还提到此属性无需使用JavaScript即可实现提示文本的自动隐藏效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如下：

<input type="text"  placeholder="用户名" required="required" />
<input type="password"  placeholder="密码" required="required" />

如图

点击输入框时，文字会自动消息。免js.

placeholder属性特别对于密码框可以提示非*号的 密码文字提示，不用Jquery简单实现

不同浏览器会有兼容性的问题。

转载于:https://www.cnblogs.com/robotli/p/5784066.html

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 6632
一、HTML5 新增 input 表单属性 1、required 属性 2、placeholder 属性 3、autofocus 属性 4、autocomplete 属性 5、multiple 属性
input text框不能为空 设置为必填
Baldy_baby的博客
11-19 5486
在网上搜了必填是加required ，但加了没有任何反应，只能用js <label for="lastname" class="col-sm-2 control-label">注销原因</label> <div class="col-sm-4"> <input type="text" required class="form-control" placeholder="必填" name="revokereason" id="revoker
web前端开发与应用——表单的验证
m0_59742894的博客
12-02 1948
表单验证的概念 表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。 表单验证的类型 HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。 required非空验证 在某个表单控件中添加required属性，则表明该表单的值
<input>标签的placeholder属性用法简单介绍
weixin_33989058的博客
03-01 791
本章节介绍一下html5新增的一个属性placeholder，当然它现在很多低版本的IE浏览器并不支持，当然这并不妨碍，因为技术一直都是在进步的，先看一段代码实例: 01 02 03 04 05 06 07 08 09 10 11 <!DOCTYPE html> <html> <head>...
Wdatepicker日期控件存数据
qq_36457584的博客
01-14 273
<input placeholder="合同结束日期" type="text" id="registerEndDate" name="registerDate" class="Wdate" @click="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', onpicked: function () {var value = $('#registerE...
[{"id":1,"type":"el-input","label":"速度3","model":"field_1741661696581","rules":{"required":false},"attrs":{"placeholder":"哈哈哈哈哈"}},{"id":2,"type":"el-select","label":"电压4","model":"field_1741661723013","rules":{"required":false},"attrs":{"placeholder":"默认220v","filterable":true,"clearable":true},"options":[{"label":"330v","value":"330v"},{"label":"220v","value":"220v"},{"label":"110v","value":"110v"},{"label":"555","value":"555"},{"label":"666","value":"666"}]},{"id":1741855937516,"type":"el-input","label":"vvvvv","model":"field_1741855937516","rules":{},"attrs":{},"options":[]},{"id":1741855941731,"type":"el-select","label":"呃呃呃呃呃呃呃","model":"field_1741855941731","rules":{},"attrs":{},"options":[{"label":"2","value":"2"},{"label":"3","value":"3"},{"label":"5","value":"5"},{"label":"6","value":"6"}]}]这种表单数据被渲染到vue页面上，写入数据后保存校验字段是否是必填非必填选项
最新发布
03-18
所以，总结校验逻辑的话，应该是遍历每个表单项，根据其rules中的required属性来决定是否进行必填校验。如果required为true，则该字段必须填写；否则不检查。但需要确保这些rules被正确转换为Element UI所需的规则...
[{"id":1,"type":"el-input","label":"电压","model":"电压","rules":{"required":true},"attrs":{"placeholder":"请输入内容"}},{"id":2,"type":"el-select","label":"频率","model":"频率","rules":{"required":true},"attrs":{"placeholder":"请选择"},"options":[{"label":"50hz","value":"50hz"},{"label":"60hz","value":"60hz"}]},{"id":3,"type":"el-input","label":"速比","model":"速比","rules":{"required":true},"attrs":{"placeholder":"请输入内容"}},{"id":4,"type":"el-select","label":"颜色","model":"颜色","rules":{"required":true},"attrs":{"placeholder":"请选择"},"options":[{"label":"黑色","value":"5"},{"label":"红色","value":"6"}]}]这种数据库里面存储的表单数据结构如何渲染到vue页面上可以编辑修改
03-13
引用[1]提到动态操作支持字段依赖，可能需要使用watch或者计算属性来监听字段的变化，并动态显示或隐藏相关表单项。 然后考虑代码结构。在template部分，可能需要用v-for遍历配置的每个表单项，根据类型渲染不同的...
[{“id”:1,“type”:“el-input”,“label”:“电压”,“model”:“电压”,“rules”:{“required”:true},“attrs”:{“placeholder”:“请输入内容”}},{“id”:2,“type”:“el-select”,“label”:“频率”,“model”:“频率”,“rules”:{“required”:true},“attrs”:{“placeholder”:“请选择”},“options”:[{“label”:“50hz”,“value”:“50hz”},{“label”:“60hz”,“value”:“60hz”}]},{“id”:3,“type”:“el-input”,“label”:“速比”,“model”:“速比”,“rules”:{“required”:true},“attrs”:{“placeholder”:“请输入内容”}},{“id”:4,“type”:“el-select”,“label”:“颜色”,“model”:“颜色”,“rules”:{“required”:true},“attrs”:{“placeholder”:“请选择”},“options”:[{“label”:“黑色”,“value”:“5”},{“label”:“红色”,“value”:“6”}]}]数据库这样的表单结构数据如何渲染到vue页面上实现修改表单模板的功能
03-13
看起来是一个包含四个表单字段的数组，每个字段有不同的类型，比如输入框（el-input）和选择框（el-select），还有各自的标签、模型、验证规则和属性。 用户可能是在使用Element UI，因为组件名是el-input和el-...
input表单的初级验证
JJ_Smilewang的博客
04-02 3071
我们平时在网页上填写表单的时候，往往都会发现填写表单内容时有一定的要求，这就是所谓的表单验证。 使用表单验证的好处主要有： ①减轻服务器的压力；②保证数据的可行性和安全性 实际开发中，表单验证基本使用js完成的，但是html中的input表单也提供一些初级的验证方法，主要有以下3种： ①placeholder属性 ②required属性 ③pattern属性 接下来就简单介绍下这三个属性如何使用！ 1.placeholder属性 placeholder属性 是input 类型的文本框...
＜Input /＞输入框及input的相关属性
outstanding木槿
04-23 5112
accept属性用来规定能够通过文件上传进行提交的文件类型。type="button"、"reset"、"submit"用于定义按钮上的显示的文本。readonly属性可与type="text"或"password"的input元素配合使用。type="text"、"password"、"hidden"用于定义输入字段的初始值。type="checkbox"、"radio"、"image"用于定义与输入相关联的值。该属性只能与type="text"或type="password"的input元素配合使用。
html5中required标签必填项
测试喵~
07-31 2万+
1、input中的required 语法： &lt;input required="required"&gt; required 属性规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 注释：required 属性适用于以下 &lt;input&gt; 类型：text, search, url, telephone, email, password, date pi...
HTML5里的input标签的required属性提示文字修改
kakaxiD的博客
05-16 2万+
input 里面增加这样的语句： <input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');" />
placeholder——文本框提示
飞一样的编程
06-03 1295
鼠标不在文本框中显示，鼠标在文本框时，自动清除。
HTML5页面使用required后，取消显示“请填写此必填项”
大强博客
05-29 1万+
问题描述：HTML5页面输入框使用required属性后，点取消按钮，页面显示“请填写此必填项”:&lt;input type="text" class="form-control" ng-model="sysCompany.companyName" required&gt;解决办法:增加formnovalidate属性:&lt;button type="submit" class="btn b
HTML 5 <input> placeholder 属性兼容性解决办法
HTMl5自由者
07-17 5636
跨浏览器placehoder body{ font:12px/1.5 'simsun';} form{ width:300px; height:260px; margin:20px auto 0;} h3{ font-weight:bold; margin:10px 0;}
html 解决 input type="password" 标签自动记住账号密码
热门推荐
文嘉
10-23 2万+
主要实现逻辑，把input type="password" 改成 type="text" 隐藏input密码，把真实密码存到input标签的一个属性中实现，下面的逻辑，每次input框中内容变化，获取真实密码逻辑如下 ps:复制一段字符串，选择一段●●或者直接把光标放到●●●●的中间粘贴都可以。 html> html lang="en"> head> meta charset=
JQgrid编辑时给必填项加上提示
张二狗的博客
11-27 1883
JQgrid在添加和编辑时，弹出的编辑框里面，难免会很有一些默认必填的选项，但是这个插件我没有在官网文档里面找到默认给这些项加必填提示的参数，只有在点击提交的时候才有参数校验对必填项进行验证提示。 所以我在源码里面做了一下修改，如下，位置在 editGridRow->callback for each()-> createData -> callback for each()里...
必填项前添加红色星号
yzx3105的博客
05-19 1万+
实现给必填项前添加红色星号 html <div class="form-group"> <label class="col-sm-3 control-label calss名字">活动名称：</label> <div class="col-sm-8"> <input name="activityName" th:field="*{activityName}" class="
HTML属性placeholder，输入框为空时显示的内容
lydiacheung的博客
09-07 4806
HTML属性placeholder，输入框为空时显示的内容
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值