大佬教程收集整理的这篇文章主要介绍了新增的input属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="/formexample.asp" method="get" autocomplete="on">
姓名：<input type="text" name="name1"/><br />
职业：<input type="text" name="career1"/><br />
电子邮件地址：<input type="email" name="email1"autocomplete="off" /><br />
<input type="submit" value="提交信息" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body">
输入你最喜欢的城市名称<br><br>
<form autocompelete="on">
<input type="text" id="city"list="cityList" ">
<datalist id="cityList" style="display:none;">
<option value="BeiJing">BeiJing</option>
<option value="QingDao">QingDao</option>
<option value="QingZhou">QingZhou</option>
<option value="QingHai">QingHai</option>
</datalist>
</form>
</body>
</html> 安全问题
<!DOCTYPE html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form>
<p>请仔细阅读许可协议：</p>
<p>
<label for="textarea1"></label>
<textarea name="textarea1" id="textarea1"cols="45" rows="5">许可协议许可协议许可协议许可协议许可协议许可协议许可协议许可协议</textarea>
</br>
</p>
<p>
<input type="submit" value="同意" autofocus="on">
<input type="submit" value="拒绝">
</p>
</form>
</body>
</html>
通过JS 脚本实现的
<!DOCTYPE html>
<head>
<Meta charset="GB2312">
<title>autofocus灞��搴��绀轰�</title>
</head>
<body>
<form name="form1">
<input type="search" id="s"autofocus>
<script>
if (!("autofocus" indocument.createElement("input"))) {
document.getElementById("s").focus();
}
</script>
<input type="submit" value="��氦">
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="" method="get"id="form1">
请输入姓名：<input type="text" name="name1"autofocus/>
<input type="submit" value="提交"/>
</form>
<p>下面的输入框在 form 元素之外，但因为指定的form属性，并且值为表单的id，所以该输入框仍然是表单的一部分。</p>
请输入住址：<input type="text" name="address1"form="form1" />
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="1.asp" id="testform">
请输入电子邮件地址： <input type="email" name="userid"/><br />
<input type="submit" value="提交到页面1" formaction="1.asp"/>
<input type="submit" value="提交到页面2" formaction="2.asp"/>
<input type="submit" value="提交到页面3" formaction="3.asp"/>
</form>
</body>
</html>
<!DOCTYPE HTML>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<html>
<body>
<form action="testform.asp" method="get">
请输入用户名: <input type="text" name="user_name"/><br />
<input type="image" src="images/btn.jpg"width="38" height="37"/>
</form>
</body>
</html> 双击图片可以提交表单
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="testform.asp" method="get">
请输入网址： <input type="url" list="url_list"name="weblink" />
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn" />
<option label="搜狐" value="http://www.sohu.com" />
<option label="网易" value="http://www.163.com" />
</datalist>
<input type="submit" value="提交" />
</form>
</body>
</html>
使用于各种文本狂,emal.phone,tel 等
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="testform.asp" method="get">
请输入数值：<input type="number" name=number1" min="0"max="12" step="4"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="testform.asp" method="get">
请选择要上传的多个文件： <input type="file" name="img"multiple="multiple" />
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
请输入邮政编码: <input type="text" name="zip_code"pattern="[0-9]{6}"
title="请输入6位数的邮政编码" />
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
请输入邮政编码: <input type="text" name="zip_code"pattern="[0-9]{6}"
placeholder="请输入6位数的邮政编码" />
<input type="submit" value="提交" />
</form>
</body>
</html>
不能为空
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
请输入姓名: <input type="text" name="usr_name"required="required" />
<input type="submit" value="提交" />
</form>
</body>
</html>
以上是大佬教程为你收集整理的新增的input属性全部内容，希望文章能够帮你解决新增的input属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。