<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>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
