html5基础_3input的用法及相关属性_html input和dict用法-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/124516082

本文详细介绍了HTML、CSS和JavaScript在网页表单中的应用，涵盖文本框、电子邮件、搜索框等，并探讨了数字输入、范围选择器、日期时间组件的使用及验证技术，如number类型、pattern属性和required属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<!-- 表单 -->
		文本框<input type="text"> <br/>
		电子邮件框:<input type="email"> <br/>
		搜索框:<input type="search"> <br/>
		电话框:<input type="url"> <br/>
		日期框:<input type="date"> <br/>
		数字:<input type="number"> <br/>
		范围:<input type="range"> <br/>
		颜色:<input type="color"> <br/>
		全局日期和时间:<input type="datetime"> <br/>
		局部日期和时间:<input type="datetime-local"> <br/>
		月:<input type="month"> <br/>
		时间:<input type="time"> <br/>
		周:<input type="week"> <br/>
		输出:<output></output>
		
		<!-- 定义一个最小值为1，最大值为20, 步长为4输入框内容。 -->
		<form action="" method="get">
			请输入<input type="number" name="num" value="15" min="1" max="20" step="3">
			<input type="submit" value="refer">
		</form>
		
		
		
		<!-- range类型使用下面属性来规定对数字类型的限定。 -->
		<!-- value规定默认值
			 min最小
			 max最大
			 会显示出1-30的范围，开始值为15
		 -->
		<form action="" method="get">
			请输入数值：<input type="range" name="rag" value="15" id="" min="1" max="30">
			<input type="image" value="" src="img/R-C.jpg">
		</form>
		
		<form action="" method="get">
			
			请选择或输入时间：<input type="time" value="10:50" step="3">
		
			
		</form>
		
		<form action="" autocomplete="off">
			
			<input type="text" name="" list="citylist" id="">
			<datalist id="citylist">
				
				<option value="beijing">beijing</option>
				<option value="qingdao">qingdao</option>
				
			</datalist>
		</form>
			<form action="">
				<!-- autofucus是自动获取焦点 -->
				<label for="textarea"></label><br>
				<input type="text" name="" id="" autocomplete="">
				<textarea name="" id="" cols="45" rows="5">许可协议具体内容……</textarea> <br>
				<input type="submit" value="同意" autofocus> <br>				
				
				
			</form>
			
			<!-- pattern是和正则方式相似的验证方式 -->
			
			<form action="" method="get">
				请输入邮政编码：
				<input type="text" name="" pattern="[0-9]{6}" title="请输入6位数的邮政编码" id="">
				<input type="submit" value="提交">
			</form>
			
			<form action="" method="get">
				<!-- required是必须输入文本 -->
				<input type="text" name="" id="" required>
				<input type="submit" value="提交">
			</form>
			
			<script>
				
				window.onload = function(){
					a = parseInt(prompt("请输入第1个数字。", 8));
					b = parseInt(prompt("请输入第2个数字。", 4));
					document.forms["form"]["result"].value = a*b;
				}
				
			</script>
			<form action="" method="get" name="form">
				两数的乘积为：
				<output name="result"></output>
			</form>
	</body>
</html>