html5表单验证的一些小知识

最新推荐文章于 2021-06-22 22:14:46 发布

hahalang-

最新推荐文章于 2021-06-22 22:14:46 发布

阅读量186

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/sinat_40697723/article/details/80204319

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

针对input中的placeholder属性对于type='date'这样的输入框无效的情况，解决方法：

<input type="text" placeholder="请输入日期" onfocus="type='date'">

如何去掉表单在chrome浏览器中记住密码后自动填充的黄色背景？

方法1：给input框设置css样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		input{
			-webkit-box-shadow:0 0 0 50px white inset;
		}
	</style>
</head>
<body>
	<form>
	<p>用户名：<input type="text" name="username"></p>
	<p>密码：<input type="password" name="psw"></p>
	<input type="submit" name="sub">
	</form>
</body>
</html>

方法2：将表单自动填充关闭，利用autocomplete='off'

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form>
	<p>用户名：<input type="text" name="username" autocomplete="off"></p>
	<p>密码：<input type="password" name="psw"></p>
	<input type="submit" name="sub">
	</form>
</body>
</html>

对于input中属性为search的输入框，想要去除他的x号，并且用一个绿色块来代替它，可以使用以下方法，但是在手机端效果不好，建议在pc端使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		input[type='search']::-webkit-search-cancel-button{
			-webkit-appearance:none;
			height: 16px;
			width: 10px;
			background-color: green;
		}
	</style>
</head>
<body>
	<form action="">
		<input type="search">
		<input type="submit" name="sub">
	</form>
</body>
</html>

效果图：

想要去除input中type=number的上下点击箭头，方法

<style type="text/css">
		input[type='number']::-webkit-inner-spin-button,
		input[type='number']::-webkit-outter-spin-button{
			-webkit-appearance:none;
		}
	</style>

input中type=number的输入框不像type=text那样可以设置maxlength属性来限制它的位数，他需要通过js来控制，方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		<input type="number" oninput="funName(this,5)">
		<input type="submit" name="sub">
	</form>
	<script type="text/javascript">
		function funName(a,length){
			if (a.value.length>length) {
				a.value=a.value.substr(0,length);
			}
		}
	</script>
</body>
</html>

效果图：即最大数只能输入五位，为99999，

hahalang-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5表单验证的一些小知识

针对input中的placeholder属性对于type='date'这样的输入框无效的情况，解决方法：&lt;input type="text" placeholder="请输入日期" onfocus="type='date'"&gt;如何去掉表单在chrome浏览器中记住密码后自动填充的黄色背景？方法1：给input框设置css样式&lt;!DOCTYPE html&gt;...
复制链接

扫一扫