HTML 5 <input> placeholder 属性

最新推荐文章于 2024-04-19 15:50:18 发布
最新推荐文章于 2024-04-19 15:50:18 发布
阅读量756 收藏
点赞数
分类专栏： html

HTML 5 <input> placeholder 属性

语法

<input placeholder="text">

属性值

值 描述
text 规定用于验证输入字段的模式。

实例

带有 placeholder 文本的搜索字段：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>
</html>

查看结果:




本文转自：“http://www.w3school.com.cn/tags/att_input_placeholder.asp

ssisse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 实现 textarea 多行输入框的 placeholder 换行显示功能，让 input（type=textarea）输入框 placeholder 灰色描述文字识别 \n 断行显示教程
王佳斌
09-20 5278
vue，textarea多行文本输入框，input type=textarea多行输入框文本，vue如何将textarea多行输入框的placeholder换行显示，vue怎么让placeholder断行显示，vue项目多行输入框placeholder灰色提示文字换行断行显示，vue实现placeholder识别\n并且换行，vue输入框placeholder不识别\n转义字符怎么办，在input、textarea 标签的placeholder中实现换行的方法，vue框架下,textarea怎样写出多行的p
HTML常用标签-----例如＜p＞＜img＞＜li＞等
qq_56798763的博客
07-04 958
1.HTML5头部结构 【DOCTYPE html】 声明文档类型为HTML5文件。 文档声明在HTML5文档必不可少，且必须放在文档的第一行。 【meta标签】 1.charset属性：单独使用，设置文档字符及编码格式。 写法：<meta charset="UTF-8"> 常见的中文编码格式： B-2312:国标码，简体中文 GBK：扩展的国标编码，简体中文 UTF-8:万国码 Unicode码，基本兼容各国语言文字 2.http-equiv属性：需配合c..
input placeholder文字换行
周金鱼啊
12-21 1202
因为在placeholder不会解析html代码，所以用换行符 ＜br／＞和 /r/n 等都没有作用。我们可以用用转义字符代替＜br／＞。
vue中 input placeholder换行
最新发布
qq_45309871的博客
04-19 350
vue中 input placeholder换行。
设置input输入框内占位文本的样式 ::placeholder选择器
weixin_55020138的博客
04-09 1947
如果你想设置输入框里面的占位文本的样式，可以通过::placeholder选择器来对其进行设置。 ::placeholder选择器允许自定义占位文本的样式，但是在该选择器中只有小一部分CSS属性可以使用： 所有和字体有关的属性：font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian(en-US),font-variant-ca...
input中的placeholder属性
qq_1240545777的博客
03-19 8011
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 &lt;input&gt; 类型：text, search, url, telephone, email 以及 password。使用：效果图：当因为用户名或密码错误，想子啊input中提示的时候，首先应该吧input....
<div class="table-container"> <table id="myTable"> <thead> <tr> <th contenteditable="true" ><input type="text" oninput="filterTable(1)" placeholder="aoiStep" ></th> <th contenteditable="true" ><input type="text" oninput="filterTable(2)" placeholder="defectType" ></th> <th contenteditable="true" ><input type="text" oninput="filterTable(3)" placeholder="layerCode" ></th> <th contenteditable="true" ><input type="text" oninput="filterTable(4)" placeholder="type"></th> <th contenteditable="true" ><input type="text" oninput="filterTable(5)" placeholder="dpet" ></th> <th contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="subcode" ></th> <th contenteditable="true" ><input type="text" placeholder="codeDescription" ></th> <th contenteditable="true" >image1</th> <th contenteditable="true" >image2</th> <th contenteditable="true">image3</th> <th contenteditable="true" >image4</th> <th contenteditable="true" >image5</th> <th contenteditable="true" ><input type="text" placeholder="determination_rule"></th> </tr> </thead> <tbody> <form action="unload.php" method="POST" enctype="multipart/form-data"> <tr> <td input type="text" name="aoi_step">3</td> <td input type="text" name="defect_type">Particle</td> <td input type="text" name="layer_code">ACT</td> <td input type="text" name="type">Particle</td> <td input type="text" name="dpet">ACT</td> <td input type="text" name="subcode">Particle</td> <td input type="text" name="code_description">ACT</td> <td> <input type="file" name="image1_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> <td> <input type="file" name="image2_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" name="image3_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" name="image4_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" name="image5_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td input type="text" name="determination_rule">Particle</td> <tr> <button type="submit">提交</button> </tr> </form> </tbody> </div> <script>修改后在我提娜佳图片是报错
07-23
<th contenteditable="true">image5</th> <th contenteditable="true"><input type="text" placeholder="determination_rule"></th> </tr> </thead> <tbody> <tr> <td><input type="text" name="aoi_step" ...
<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } td:nth-child(1) input, td:nth-child(2) input, td:nth-child(3) input, td:nth-child(4) input, td:nth-child(5) input, td:nth-child(6) input, td:nth-child(7) input, td:nth-child(8) input { width: 10%; } </style> </head> <body> <table> <tr> <td contenteditable="true"><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr>为什么前7列列宽能修改后面的列宽无法修改了
07-17
<td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr> </table> </body> </html> ``` 在上述代码中，我将`contenteditable="true"`...
Javascript——＜input＞: 输入（表单输入）元素的type和样式属性
mintsolace的博客
08-19 2049
<label for="name">Name (4 to 8 characters):</label> <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> label { display: block; font: 1rem 'Fira Sans', sans-serif; } input, label {
<tr> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="aoiStep"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="defectType"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="layerCode"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="subcode"></td> <td contenteditable="true"><input type="text" placeholder="codeDescription"></td> <td contenteditable="true">image1</td> <td contenteditable="true">image2</td> <td contenteditable="true">image3</td> <td contenteditable="true">image4</td> <td contenteditable="true">image5</td> <td contenteditable="true"><input type="text" placeholder="determination_rule"></td> </tr>这个表格怎么生成。表单的action属性指定了一个名为insert.php的PHP文件，用于处理表单提交并将数据插入到数据库中
07-20
<td>image5</td> <td><input type="text" name="determination_rule" placeholder="determination_rule"></td> </tr> </table> <input type="submit" value="Submit"> </form> </body> </html> ``` 上述...
input 的 placeholder 样式
huangpb的博客
09-14 2746
这个伪元素可以改变 input、textarea 占位文本的样式。
placeholder中实现换行
天棋
02-15 6560
html控件中如何实现在placeholder中换行提示。因为在placeholder不会解析html代码，所以用换行符 ＜br／＞和 /r/n 等都没有作用。我们可以用用转义字符代替＜br／＞。 &amp;lt;textarea name=&quot;instructions&quot; id=&quot;instructions&quot; rows=&quot;5&quot; cols=&quot;120&quot; datat
Input placeholder属性样式修改(颜色,大小,位置)
热门推荐
杨春建的博客
12-11 8万+
原文地址：https://www.cnblogs.com/ooo0/p/6141764.html 1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>title> 6 style> 7 8 input::-webkit-input-placeholde
修改 placeholder 样式，placeholder 换行 以及iOS 上设置placeholder被遮挡问题解决
baidu_41601299的博客
06-11 2898
一、修改placeholder样式 通过选择器就可以简单的修改该placeholder的样式 input::placeholder{ font-size:14px; color: #666666; } 二、placeholder 换行 在input 里面很少用到,input 就只有一行而已,多行的话就会使用textarea标签,确实在textarea标签里面如何让placehol...
input placehold内容换行
weixin_43858851的博客
05-26 574
input placehold内容换行
【HTML】placeholder中换行
weixin_30852419的博客
02-06 142
&#13; 表示回车 &#10;表示换行 案例 <textarea rows="10" placeholder="测试换行 &#10;新的一行"></textarea> 转载于:https://www.cnblogs.com/BearLee/p/8423478.html...
el-input输入框占位文本placeholder换行显示
SillyBoy的博客
05-17 8376
代码如下： <el-input v-model="form.instructions" type="textarea" :autosize="{ minRows: 4}" :placeholder="'1.嘻嘻嘻\n2.哈哈哈'" /> 效果：
placeholder属性实现换行
TeFuir__Lv的博客
05-23 1733
【代码】placeholder属性实现换行。
input框设置输入文字换行_【CSS专题】<elinput/>标签设置placeholder属性样式小汇...
weixin_39590868的博客
12-01 3363
1、常规样式，对input标签举例<el-input v-model="inputValue" placeholder="请输入内容" >el-input><script>export default { data() { return {inputValue:'' } }}script>2、方式一：修改重新定义的样式(在...
HTML5 <input> 新增属性详解
HTML5为`<input>`元素引入了许多新的属性，这些属性极大地增强了表单控件的功能和用户体验。以下是这些新特性的详细介绍： 1. **autocomplete**：这个属性控制是否显示与用户当前输入相匹配的历史记录。例如，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值