H5新增表单属性

最新推荐文章于 2022-11-24 15:53:11 发布

我的时区

最新推荐文章于 2022-11-24 15:53:11 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： html5

本文链接：https://blog.youkuaiyun.com/The_Road_of_Java/article/details/119641829

笔记专栏收录该内容

35 篇文章

订阅专栏

<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<form action="" id="myForm">
		<!-- placeholder:文本提示信息-->
		<!-- autofocus自动获得焦点 -->
		<!-- autocomplete自动完成，on打开，off关闭
		触发条件1、成功提交过
			    2、输入框设置了name属性-->
		用户名:<input type="text" name="userName" placeholder="请输入用户名" autofocus="" autocomplete="on"/><br>
		<!-- 手机号验证:
			required:必须输入
			pattern:正则表达式设置规则 -->
		<!-- 手机号:<input type="tel" name="" id="" value="" required="" pattern="^(\+86)?1\d{10}$"/><br> -->
		<!-- 文件上传:multiple可选择多个文件 -->
		请选择文件:<input type="file" name="files" id="" value="" multiple=""/><br>
		<!-- 允许输入多个邮箱地址，邮箱之间用逗号分隔 -->
		邮箱:<input type="email" name="" id="" value="" multiple required=""/><br>
		<input type="submit" name="" id="" value="提交" />
		<!-- 以下元素未包含在form表单中，默认情况下是不会提交的
			 form:指定表单id，将来在指定id的表单提交回一起提交-->
		地址:<input type="text" name="" id="" value="" form="myMorm"/><br>
		<!-- 传统的下拉选项框(不能输入值) -->
		<!-- 专业:<select>
			<option value ="1">前端</option>
			<option value ="2">Java</option>
			<option value ="3">C++</option>
		</select> -->
		<!-- 不仅可以选择还可以输入，需要建立input和datalist之间的联系 -->
		专业:<input type="text" name="" id="" value="" list="subjects"/><br>
		<datalist id="subjects">
			<!-- option可以是单标签也可以是双标签 -->
			<option value ="前端" label="前景非常好"></option>
			<option value ="Java" label="人数多"></option>
			<option value ="C++" label="不知道"></option>
		</datalist>
		<!-- 如果类型是网址则必须输入合法的网址,http"//....." -->
		网址:<input type="url" name="" id="" value="" list="subjectss"/>
		<datalist id="subjectss">
			<!-- option可以是单标签也可以是双标签 -->
			<option value ="www.baidu.com" label="百度"></option>
			<option value ="www.guge.com" label="谷歌"></option>
			<option value ="www.tengxun.com" label="腾讯"></option>
		</datalist>
	</form>
</body>