input的类型大全

时间:2022-07-28
本文章向大家介绍input的类型大全，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="text" id="btn">
	<script type="text/javascript">
		btn.onchange=function()//当text内的字符串发生改变时按下enter就触发(((改变事件)))
		{
			alert(this.value);
		}

	</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="text" id="btn">
	<span id="spn"></span>
	<script type="text/javascript">
		btn.oninput=function()//当在text内打字的时候同步在text外的span标签内出现内容
		{
			spn.innerHTML=this.value;
		}

	</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="checkbox"  checked>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		div
		{
			width: 200px;height: 200px;background: black;
		}
	</style>
</head>
<body>
<input type="color" id="btn1">
<input type="color" id="btn2">
<div id="div1"></div>
<script type="text/javascript">
	btn2.oninput=btn1.oninput=function()
	{
		div1.style.background="-webkit-linear-gradient("+btn1.value+","+btn2.value+")";
	}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input type="date">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<form action="">
		<input type="email">
		<input type="submit" value="提交">
	</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div
		{
			width: 50px;height: 50px;background: red;
		}
	</style>
</head>
<body>
<input type="file" id="btn">
<div id="div1"></div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="image" src="21312.jpg">
	<input type="button" id="btn2">
	<script type="text/javascript">
		btn2.onclick=function()
		{
			console.log(typeof Number(btn2.value));
		}
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type='number' id='btn'>+
<input type='number' id='btn3'>
<input type='button' id='btn2'>
<script type="text/javascript">
	btn2.onclick=function()
	{
		alert(typeof Number(btn.value));
	}
</script>
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<label>
<input type='radio' name='a'>
aaaa
</label>
<label>
<input type='radio' name='a'>bbbb
<label>
<label>
<input type='radio' name='a'>cccc
<label>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title><style type="text/css">
div{width: 50px;height: 50px;background: black;}

    </style>
</head>
<body>
	<input type="range" id="btn"><div id='div1'></div>

	<script type="text/javascript">
		btn.oninput=function()
		{
			div1.style.width=this.value+"px";
		}
	</script>
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
div{width: 50px;height: 50px;background: black;}

    </style>
</head>
<body>
<form>
	用户：<input name='user'><br>
	密码：<input type='password' name='pass'><br>
	<input type='reset' id='btn'>
	<input type='submit' id='btn'>
</form>
<script type="text/javascript">
	


</script>
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<input type="search">
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<form action="http://localhost:8888/1.php" method="get">
	用户:<input name='user'>
	密码:<input name='pass'>
	<input type='submit' value='提交'>
</form>

<script type="text/javascript">


	btn.onchange = function(){
		spn.innerHTML = this.value;
		//alert(this.value)
	}


</script>
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
div{width: 50px;height: 50px;background: black;}

    </style>
</head>
<body>
<input type='tel'>
<script type="text/javascript">
	


</script>
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<form >
	<input type='url'>
	<input type='submit' value='提交'>
</form>
</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<input type='week'>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		/*p~ul选择器 p之后出现的所有ul。*/
		div{width: 100px;height: 100px;background: #ccc;border: 1px solid black;
			transition:0.3s;
		}
		div:after{
			content:'111';
		}
		input:nth-child(2):checked~div/*~的意思是input:nth-child(2):checked之后出现的所有的div*/
		{
			width: 300px;height: 300px;
			border-radius: 50%;
		}
		div:nth-child(2):checked~div:after
		{
			content: "222";
		}
		input:nth-child(3):checked~div{
		width: 120px;height: 99px;
		border-radius: 20%;
		box-shadow: 0 0 5px black;
		background: green;
	}
	input:nth-child(3):checked~div:after{
		content: '333';
	}
	input:nth-child(4):checked~div:after{
		content: '444';
	}
	</style>
</head>
<body>
	<input type='radio' name='a' checked>
<input type='radio' name='a'>
<input type='radio' name='a'>
<input type='radio' name='a'>
<div></div>
<div></div>

</body>

</html>

随机文章
本站知识点必读
最近更新