投稿
  1. 首页
  2. 随笔

谁知道在HTML的表单里的文本输入框的这种效果（弧形拐角，红色边框）怎样实现？

坏蛋是怎样炼成的txt • 2023-3-17 • 随笔 • 阅读 77

谁知道在HTML的表单里的文本输入框的这种效果（弧形拐角，红色边框）怎样实现？,第1张

以下代码解决你的问题

文本输入边框.html    文件代码清单如下：

<!doctype html>

<html lang="zh">

    <head>

        <meta charset="utf-8">

        <title>文本输入边框</title>

        <link rel="stylesheet" href="inputborder.css">

    </head>

    <body>

        <form action="" method="">

            <fieldset>

                <label>用户登录</label>

                <label>用户名</label>

                <input type="text" id="Username">

                <label>密码</label>

                <input type="password" id="Pwd">

            </fieldset>

        </form>

    </body>

</html>

inputborder.css   文件代码清单如下：

form {

position: absolute   /* 表单定位 */

top: 50px            /* 表单定位 */

left: 200px          /* 表单定位 */

color: rgb(120, 120, 120)

}

fieldset {

border: none

display: inline

}

label {

display: block

margin: 0

padding: 10px 1px

width: 150px

font-size: 16px

letter-spacing: 2px

text-align: center

}

input {

margin: 0

padding: 10px 0

border: 1px solid rgb(180, 180, 180)

border-radius: 8px                /* 圆角边框 */

width: 150px

font-size: 16px

text-align: center

}

input:hover {

border: 1px solid rgb(255, 0, 0)

}

演示图如下：

用到的是js和正则表达式代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /> 

<title>html留言表单验证</title> 

<style> 

*{margin:0pxpadding:0px}  

body{background-color:#f9f9f9}  

.clears{ clear:both}  

/*messages*/  

.messages{padding:15px 0}  

.messages input,.messages select,.messages textarea{margin:0padding:0background:noneborder:0font-family:"Microsoft Yahei"}  

.messlist {height:30pxmargin-bottom:10px}  

.messlist label{float:leftwidth:100pxheight:30pxfont-size:14pxline-height:30pxtext-align:rightpadding-right:10px}  

.messlist input{float:leftwidth:300pxheight:28pxpadding-left:5pxborder:#ccc 1px solid}  

.messlist.textareas{ height:auto}  

.messlist textarea{float:leftwidth:400pxheight:110pxpadding:5pxborder:#ccc 1px solid}  

.messlist.yzms input{width:100px}  

.messlist.yzms .yzmimg{ float:leftmargin-left:10px}  

.messsub{padding:0px 0 0 110px}  

.messsub input{width:100pxheight:35pxbackground:#dddfont-size:14pxfont-weight:boldcursor:pointermargin-right:5px}  

.messsub input:hover{ background:#f60color:#fff}  

#label0{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label1{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label2{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label3{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label4{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label5{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label6{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label7{display:nonecolor:#0aa770height:28pxline-height:28px}  

#label8{display:nonecolor:#0aa770height:48pxline-height:48px}  

#label9{display:nonecolor:#0aa770height:48pxline-height:48px}  

#label10{display:nonecolor:#0aa770height:48pxline-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:#00a3ebcolor:#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 = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{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[3|4|5|7|8]\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> 

（---------满意采纳奥---------）

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6200560.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
坏蛋是怎样炼成的txt 坏蛋是怎样炼成的txt 一级用户组
0 0
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表（0条）

保存