HTML input 文本框添加提示文字的方法
周未休息，感觉没啥可写的，就水一篇文章吧，说一说前端 html 页面中 input 元素中在没有值的情况下，添加提示的文字，当要输入文字的时候，提示的文字消失。
关于 html input 输入框的提示文字，有两种方法可以实现，一种为 input 元素的 placeholder 属性，一种为 js 方法。
placeholder：属性提供可描述输入字段预期值的提示信息
语法：
例：input 添加提示的文字
代码：
运行结果：
当input输入框，输出文字时，提示的文字信息会消失
示例代码：
运行结果：
注：
1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果
2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失
3、js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失
HTML表单及其Input输入类型
HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。
一、HTML表单
1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。
2、表单使用标签<form>来设置，示例：
运行结果：
二、HTML表单属性：
1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。
2、action属性
在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。
如果省略 action 属性，则 action 会被设置为当前页面。
3、method 属性
method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。
如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。
4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：
<!DOCTYPE html>
<html>
<body>
<form action=\”/demo/demo_form.asp\”>
First name:<br>
<input type=\”text\” name=\”Firstname\” value=\”Mickey\”>
<br>
Last name:<br>
<input type=\”text\” name=\”lastname\” value=\”Mouse\”>
<br><br>
<input type=\”submit\” value=\”Submit\”>
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>
</body>
</html>
运行结果：
5、target 属性
target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：
默认值为 _self，这意味着响应将在当前窗口中打开。
6、Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：
运行结果：
7、所有<form>属性的列表：
三、HTML表单元素：
1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：
① 文本输入（text），示例：
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type=\”text\” name=\”firstname\”>
<br>
Last name:<br>
<input type=\”text\” name=\”lastname\”>
</form>
<p>请注意表单本身是不可见的。</p>
<p>同时请注意文本字段的默认宽度是 20 个字符。</p>
</body>
</html>
运行结果：
② 单选按钮输入（radio），示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type=\”radio\” name=\”sex\” value=\”male\” checked>Male
<br>
<input type=\”radio\” name=\”sex\” value=\”female\”>Female
</form>
</body>
</html>
运行结果：
③ 提交按钮（submit），示例：
<!DOCTYPE html>
<html>
<body>
<form action=\”/demo/demo_form.asp\”>
First name:<br>
<input type=\”text\” name=\”firstname\” value=\”Mickey\”>
<br>
Last name:<br>
<input type=\”text\” name=\”lastname\” value=\”Mouse\”>
<br><br>
<input type=\”submit\” value=\”Submit\”>
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
运行结果：
2、<select>元素
<select>元素定义下拉列表，示例：
<!DOCTYPE html>
<html>
<body>
<form action=\”/demo/demo_form.asp\”>
<select name=\”cars\”>
<option value=\”volvo\”>Volvo</option>
<option value=\”saab\”>Saab</option>
<option value=\”fiat\”>Fiat</option>
<option value=\”audi\”>Audi</option>
</select>
<br><br>
<input type=\”submit\”>
</form>
</body>
</html>
运行结果：
3、<fieldset>元素
<fieldset>元素组合表单中的相关数据
<legend>元素为<fieldset>元素定义标题，示例：
<!DOCTYPE html>
<html>
<body>
<form action=\”/demo/demo_form.asp\”>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type=\”text\” name=\”firstname\” value=\”Mickey\”>
<br>
Last name:<br>
<input type=\”text\” name=\”lastname\” value=\”Mouse\”>
<br><br>
<input type=\”submit\” value=\”Submit\”>
</fieldset>
</form>
</body>
</html>
运行结果：
4、<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）、示例：
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name=\”message\” rows=\”10\” cols=\”30\”>
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
运行结果：
5、HTML5<datalist>元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：
<!DOCTYPE html>
<html>
<body>
<form action=\”/demo/demo_form.asp\”>
<input list=\”browsers\” name=\”browser\”>
<datalist id=\”browsers\”>
<option value=\”Internet Explorer\”>
<option value=\”Firefox\”>
<option value=\”Chrome\”>
<option value=\”Opera\”>
<option value=\”Safari\”>
</datalist>
<input type=\”submit\”>
</form>
</body>
</html>
运行结果：
四、HTML表单输入类型
<input>中的type：
输入限制：
这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
