输入框html代码（html弹出一个输入框提示用户输入姓名）
本文目录
- html弹出一个输入框提示用户输入姓名
- html的文本框代码怎么写
- 用html写input输入框
- html代码，在输入框写一个网站，点击按钮打开输入框的网站 给一下网站完整代码
- 在HTML代码中input是什么意思
html弹出一个输入框提示用户输入姓名
1、首先打开html器，新建一个html文件，例如：index.html。
2、在index.html中的《body》标签中，输入以下html代码：
《input type="text" placeholder="请输入账号" /》
《input type="password" placeholder="请输入密码" /》
3、浏览器运行index.html页面，此时的输入框有了提示文字“请输入账号”，密码框有了提示文字“请输入密码”。
html的文本框代码怎么写
1.单行文本框：
《input type="text" style="height:20px;width:100px;" /》
2.多行文本框（文本域）：
《textarea style="width:300px;height:100px;"》《/textarea》
文本框是单行的，而文本域可以输入多行，不过文本框也可以通过设置变成成多行。一般来说如果要填写的内容很多我们就用文本域《textarea》,反之用《text》。
用html写input输入框
演示图如下：
用到的是js和正则表达式代码如下：
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》html留言表单验证《/title》
《style》
*{margin:0px;padding:0px;}
body{background-color:#f9f9f9;}
.clears{ clear:both;}
/*messages*/
.messages{padding:15px 0;}
.messages input,.messages select,.messages textarea{margin:0;padding:0; background:none; border:0; font-family:"Microsoft Yahei";}
.messlist {height:30px;margin-bottom:10px;}
.messlist label{float:left;width:100px; height:30px; font-size:14px; line-height:30px; text-align:right;padding-right:10px;}
.messlist input{float:left;width:300px;height:28px;padding-left:5px;border:#ccc 1px solid;}
.messlist.textareas{ height:auto;}
.messlist textarea{float:left;width:400px; height:110px;padding:5px;border:#ccc 1px solid;}
.messlist.yzms input{width:100px;}
.messlist.yzms .yzmimg{ float:left;margin-left:10px;}
.messsub{padding:0px 0 0 110px;}
.messsub input{width:100px; height:35px; background:#ddd; font-size:14px; font-weight:bold; cursor:pointer;margin-right:5px}
.messsub input:hover{ background:#f60;color:#fff;}
#label0{display:none;color:#0aa770;height:28px;line-height:28px;}
#label1{display:none;color:#0aa770;height:28px;line-height:28px;}
#label2{display:none;color:#0aa770;height:28px;line-height:28px;}
#label3{display:none;color:#0aa770;height:28px;line-height:28px;}
#label4{display:none;color:#0aa770;height:28px;line-height:28px;}
#label5{display:none;color:#0aa770;height:28px;line-height:28px;}
#label6{display:none;color:#0aa770;height:28px;line-height:28px;}
#label7{display:none;color:#0aa770;height:28px;line-height:28px;}
#label8{display:none;color:#0aa770;height:48px;line-height:48px;}
#label9{display:none;color:#0aa770;height:48px;line-height:48px;}
#label10{display:none;color:#0aa770;height:48px;line-height:48px;}
《/style》
《/head》
《body》
《br》
《div class="mail"》
《div class="send"》
《div class="sendbox"》
《form action="#" method="get" class="messages"》
《div class="messlist"》
《label》姓名《/label》
《input type="text" placeholder="姓名" id="input1" onblur="jieshou()"/》
《div id ="label0"》*你还没填写名字呢!《/div》
《div id ="label1"》√正确《/div》
《div id ="label2"》×错误《/div》
《div class="clears"》《/div》
《/div》
《div class="messlist"》
《label》电子邮件《/label》
《input type="text" placeholder="电子邮件" id="input2" onblur="mailtext()"/》
《div id ="label3"》√正确《/div》
《div id ="label4"》×邮箱地址错误《/div》
《div id ="label5"》*必填《/div》
《div class="clears"》《/div》
《/div》
《div class="messlist"》
《label》手机号《/label》
《input type="text" placeholder="手机号" id="input3" onblur="phonetext()"/》
《div id ="label6"》√正确《/div》
《div id ="label7"》×手机号码错误《/div》
《div class="clears"》《/div》
《/div》
《div class="messlist textareas"》
《label》留言内容《/label》
《textarea placeholder="说点什么吧..." id="input4" onblur="content()"》《/textarea》
《div id ="label8"》√《/div》
《div id ="label9"》×《/div》
《div id ="label10"》* 必填《/div》
《div class="clears"》《/div》
《/div》
《div class="messlist yzms"》
《label》验证码《/label》
《input type="text" placeholder="验证码" id="input5" /》
《img src="../images/code.jpg" width="64" height="27" class="yzmimg" /》
《div class="clears"》《/div》
《/div》
《div class="messsub"》
《input type="submit" value="提交" onclick="send()"style="background:#00a3eb;color:#fff;" /》
《input type="reset" value="重填" /》
《/div》
《/form》
《script》
function send(){
var name = document.getElementById("input1").value;
var mail = document.getElementById("input2").value;
var phone = document.getElementById("input3").value;
var content = document.getElementById("input4").value;
var code = document.getElementById("input5").value;
if(name=="")
{
label2.style.display = ’none’;
label1.style.display = ’none’;
label0.style.display = ’block’;;
return false;
}
if(mail=="")
{
label3.style.display = ’none’;
label4.style.display = ’none’;
label5.style.display = ’block’;;
return false;
}
if(content=="")
{
label8.style.display = ’none’;
label9.style.display = ’none’;
label10.style.display = ’block’; //*必填
return false;
}
if(code=="")
{
alert(’请填写验证码！’);
return false;
}
else{
alert(’信息已发送到站长邮箱，感谢您的支持！’);
}
}
《/script》
《script》
function jieshou(){
var label1 = document.getElementById("label1");
var label2 = document.getElementById("label2");
var nametext = document.getElementById("input1").value;
if(nametext!=""){
label0.style.display = ’none’;
label1.style.display = ’block’;
label2.style.display = ’none’;
}
else{
label0.style.display = ’block’;
label1.style.display = ’none’;
label2.style.display = ’none’;
}
}
《/script》
《script》
function mailtext(){
var mailvalue = document.getElementById("input2").value;
var mailtext = document.getElementById("input2");
var myreg = /^({2,3}$/;
if(mailvalue!=""){ //邮箱如果非空 显示正确
label5.style.display = ’none’;
label3.style.display = ’block’;//显示正确
label4.style.display = ’none’;
}
else{
label5.style.display = ’block’;//显示*必填
label3.style.display = ’none’;
label4.style.display = ’none’;
return false;
}
//上面为一段
if(!myreg.test(mailvalue)){ //既而 正则表达式 验证邮箱 如果不是邮箱地址label4显示出来
label3.style.display = ’none’;
label4.style.display = ’block’; //*邮箱地址错误
return false;
}
else{
label3.style.display = ’block’;
label5.style.display = ’none’;
label4.style.display = ’none’;
}
//上面为一段
}
《/script》
《script》
function phonetext(){
var phonetext = document.getElementById("input3").value;
if(!(/^1\d{9}$/.test(phonetext))){
label6.style.display = ’none’;
label7.style.display = ’block’; //*手机号码错误
return false;
}
else{
label6.style.display = ’block’;
label7.style.display = ’none’;
}
}
《/script》
《/script》
《script》
function content(){
var content = document.getElementById("input4").value;
if(content!=""){
label8.style.display = ’block’;
label9.style.display = ’none’;
label10.style.display = ’none’; //*必填
return false;
}
else{
label8.style.display = ’none’;
label9.style.display = ’none’;
label10.style.display = ’block’;
}
}
《/script》
《/div》
《/div》
《/div》
（---------满意采纳奥---------）
html代码，在输入框写一个网站，点击按钮打开输入框的网站 给一下网站完整代码
《input id="address" type="text" value="" placeholder="请输入地址"》
《button id="serach"》搜索《/button》
《script》
window.onload=function(){
var link=document.getElementById("address").value;
var serach=document.getElementById("serach");
serach.onclick=function(){
location.href=link;
}
}
《/script》
在HTML代码中input是什么意思
HTML中《input》 标签用于搜集用户信息，简单来说就是用户在网页输入的信息都是写在《input》标签中。
《input》根据不同的 type 属性值，输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等很多种形式。
textarea 是文本域，input 属于表单组件，text是文本框。
示例图如下：
扩展资料：
HTML的《input》 标签具体的用法：
1、首先设置两个input标签，里面的type值分别表示文本输入和密码输入，这是最常用的两种input标签：
2、其次就是单选按钮了，这里把type值设置为“radio”，设置性别是一个单项选择，此时就得加上一个name属性，这样单选按钮就完成了：
3、然后是复选框的使用，这里把type值设置为“CheckBox”就可以了：
4、最后就是上传文件或图片的按钮也经常用到，这里则需要将type值设置为“file”即可：
5、最后，打开浏览器，就可以看到所有input标签的效果了。以上就是input标签的介绍和用法演示：
参考资料来源：百度百科-input
更多文章：
2026年10月15日 07:50
2026年10月15日 06:30
2026年10月15日 06:00
avantage怎么设置为中文（Avantage安装丢失GIT）
2026年10月15日 03:00
2026年10月15日 02:40
2026年10月15日 02:10
activex控件未注册怎么办（登陆视频监控网页时提示activex控件未注册，怎么解决）
2026年10月14日 20:30
2026年10月14日 20:20
excel连接sql数据库教程（excel怎么连接sql数据库）
2026年10月14日 19:40
2026年10月14日 19:00
