input标签里面type常用属性（注册登录表单常用元素）

最新推荐文章于 2024-07-29 14:52:42 发布

a little peanut

最新推荐文章于 2024-07-29 14:52:42 发布

阅读量1.3w

点赞数 8

文章标签： html标签学习

本文链接：https://blog.csdn.net/dayexiaofan/article/details/86464386

版权

之前写一些小项目的时候，在表单这一块因为知道的type属性就text、password、button、submit等一些值，而且form表单也应用的不是很灵活，所以通过简单的学习，认识到以前写的form表单有多搞笑（连type=data都不知道）。

现在，就对form表单里常用的元素进行整理。

type值	代表的含义
text	文本
password	密码
button	按钮
file	文件
checkbox	复选框
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
radio	单选框
reset	重置
tel	手机号码
email	邮箱地址
number	数字
date	日期

上述表单就是一些常用的表单元素，如有不足，欢迎雅正！

再更新一些：

新增的input type属性值：

类型	使用示例	含义
email	<input type="email>	输入邮箱格式
tel	<input type=“tel”>	输入手机号码格式
url	<input type=“url”>	输入url格式
number	<input type=“number”>	输入数字格式
search	<input type=“search”>	搜索框（体现语义化）
range	<input type=“range”>	自由拖动滑块
time	<input type=“time”>	小时分钟
date	<input type=“date”>	年月日
datetime	<input type=“datetime”>	时间
month	<input type=“month”>	月年
week	<input type=“week”>	星期年

常用新属性

属性	用法	含义
placeholder	<input type=“text” placeholder=“请输入用户名”>	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	<input type=“text” autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple	<input type=“file” multiple>	多文件上传
autocomplete	<input type=“text” autocomplete=“off”>	规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required	<input type=“text” required>	必填项内容不能为空
accesskey	<input type=“text” accesskey=“s”>	规定激活（使元素获得焦点）元素的快捷键采用 alt + s的形式

下面在给出一个简单的html例子作为参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--<table width="600" border="1px" cellpadding="0" cellspacing="0">
			<caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
		</table>-->
		<form action="">
			<!--当一组表单元素放到fieldset标签内时，浏览器会以特殊的方式来显示它们，它们可能有特殊的
				边界、3D效果，或者甚至可创建一个子表单来处理这些元素
			-->
		  <fieldset>
		  	<!--legend元素为fieldset元素定义的标题-->
		    <legend>学生档案</legend>
		    <label for="userName">姓名:</label>
		    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
		    <label for="userPhone">手机号码:</label>
		    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
		    <label for="email">邮箱地址:</label>
		    <input type="email" required name="email" id="email"><br>
		    <label for="collage">所属学院:</label>
		    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
		    <datalist id="cList">
		      <option value="前端与移动开发学院"></option>
		      <option value="java学院"></option>
		      <option value="c++学院"></option>
		    </datalist><br>
		    <label for="score">入学成绩:</label>
		    <input type="number" max="100" min="0" value="0" id="score"><br>
		   	<form action="">
			    <fieldset>
			    	<legend>学生档案思密达</legend>
			    	<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
			    	<label>手机号: <input type="tel" /></label> <br /><br />
			    	<label>邮箱: <input type="email" /></label> <br /><br />
			    	<label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/>
			    	<datalist id="xueyuan">
			    		<option>java学院</option>
			    		<option>前端学院</option>
			    		<option>php学院</option>
			    		<option>设计学院</option>
			    	</datalist>
			
			    	<br /><br />
			
			    	<label>出生日期:   <input type="date" /></label> <br /><br />
			    	<label>成绩:  <input type="number" /></label> <br /><br />
			    	<label>毕业时间:  <input type="date" /></label> <br /><br />
			    	<input type="submit" />  <input type="reset" />
			    </fieldset>
		    </form>
		    <label for="inTime">入学日期:</label>
		    <input type="date" id="inTime" name="inTime"><br>
		    <label for="leaveTime">毕业日期:</label>
		    <input type="date" id="leaveTime" name="leaveTime"><br>
		    <input type="submit">
		  </fieldset>
		</form>
	</body>
</html>

展示界面
在这里插入图片描述