h5的一些基本的输入框

最新推荐文章于 2023-11-02 15:07:24 发布

Grit_ICPC

最新推荐文章于 2023-11-02 15:07:24 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/JS 文章标签： h5

本文链接：https://blog.youkuaiyun.com/Grit_ICPC/article/details/53152304

HTML/CSS/JS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML表单中的各种输入元素及其属性，包括文本输入、电子邮件验证、密码输入、范围选择器等，并展示了如何使用数据列表增强用户体验。

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

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	
<form method="post" action="" id="FORM1">
	
<fieldset>
	<legend>信息
	</legend>
	<ol>
		<li>
			<label for="username">用户名</label>
			<input id="username" name="username" required autofocus='' type="text" pa
			ttern="[a-zA-Z0-9]{2,5}">
		</li>

		<li>
			<label for="email">邮件
			</label>
			<input id="email" name="email" placeholder="adsf@163.com" required type="email" />
		</li>

		<li>
			<label>密码
			</label>
			<input id="passwd" name="passwd" placeholder="填写密码" required  type="passward"/>
		</li>

		<li>
			<label>年龄
			</label>
			<input id="age" name="age" type="range" min="18" max="60" value="30"/>
			<span>最小18岁</span>
		</li>
		<li>
			<label>家庭人数
			</label>
			<input id="num" name="num" type="number" />
			
		</li>

		<li>
			<label>生日
			</label>
			<input id="birthday" name="birthday" type="date" />
			
		</li>


		<li>
			<label for="search">搜索引擎
			</label>
			<input list="cars" />
			<datalist id="cars">
				<option value="BMW">
				<option value="Ford">
				<option value="Volvo">
			</datalist>
			
		</li>
	</ol>
</fieldset>
	
</form>
  

 </body>
</html>