<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*<!-- 属性设置同html5-->*/
/*form{*/
/*width: 100%;*/
/*/!* 最大宽度*!/*/
/*max-width: 640px;*/
/*/!* 最小宽度*!/*/
/*min-width: 320px;*/
/*margin:0 auto;*/
/*font-family: "Microsoft Yahei";*/
/*font-size: 20px;*/
/*}*/
/*input,meter,progress{*/
/*display: block;*/
/*width: 100%;*/
/*height:30px;*/
/*margin:10px 0;*/
/*}*/
</style>
</head>
<body>
<!-------------------------表单的类型-------------------------------->
<!-- type:表单的类型-->
<!--<input type="file" />-->
<form action=""><!--action 提交表单的地址-->
<fieldset>
<legend>表单属性</legend><!--表单大外框名称-->
<label for="ee"><!--for跟的是Id值 可以喝input里面的Id值关联 点击名称 自动获取焦点-->
<!-- 邮箱属性 自动验证输入是否有误 ”邮箱可以“用中文 也可以用英文不影响判断-->
邮箱:<input type="email" name="email" id="ee"/>
</label>
<!-- url属性 也会验证网址输入是否有误-->
<label for="">
url:<input type="url" name="url" id="" >
</label>
<label for="">
<!-- 数字类型 step=3 输入的数字为3的倍数默认上下拉滚动条-->
number:<input type="number" name="number" step="3"/>
</label>
<label for="">
<!-- 在浏览器上栏显示输入内容-->
tel:<input type="tel" name="tel"/>
</label>
<label for="">
<!-- 搜索框 输入内容被提交到浏览器地址栏-->
search: <input type="search" name="search"/>
</label>
<label for="">
<!-- range进度条 定义最小值 最大值 -->
range: <input type="range" name="range" value="100" min="0" max="300"/>
</label>
<!-- time,date-->
<label for="">
<!-- 时间格式 -->
time:<input type="time" name="time"/>
</label>
<label for="">
<!-- date年月日 带下拉列表弹出日历功能 可以选择-->
date: <input type="date" name="date" />
</label>
<label for="">
month: <input type="month" name="month" />
</label>
<label for="">
week: <input type="week" name="week" />
</label>
<input type="submit" value="提交"/>
</fieldset>
</form>
<!-----------------------------------------智能下拉表单--------------------------------------------->
<select >
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
</select>
<br/><br/><br/>
<!-- 一个普通的输入框-->
<!-- 通过list=car 跟下面的 datalist标签中的id值进行关联-->
<input type="text" list="car" />
<!-- datelist为下拉菜单标签-->
<!--数据列表标签-->
<datalist id="car">
<option>宝马</option>
<option>宝骏</option>
<option>宝强</option>
<option>宝宝</option>
<option>奥迪</option>
<option>奥迪奥</option>
<option>迪奥</option>
</datalist>
<!-------------------------------------表单元素-------------------------------------------->
<form action="">
<fieldset>
<legend>表单元素</legend>
<label>
用户名:<input type="text" name="userName" />
</label>
<label>
<!--密码属性-->
密码:<input type="password" name="pwd" />
</label>
<label >
性别:<input type="text" name="sex" list="sex" />
</label>
<!-- 定义数据列表-->
<datalist id="sex">
<option >男</option>
<option >女</option>
<option >不祥</option>
<option >其它</option>
</datalist>
<label for="">
推荐人:<output>春哥</output>
</label>
<br/><br/>
<label for="">
加密类型: <keygen/>
</label>
<br/><br/>
<label for="#">
度量器:<meter value="50" max="100" min="0" low="30" high="80"></meter>
</label>
<!-- 进度条-->
<progress value="40" max="100" min="0"></progress>
<!-- progress 进度条 progress progress progress 进度条progress 进度条
progress 进度条 -->
<input type="submit" value="提交"/>
</fieldset>
</form>
<!-----------------------------------表单属性-------------------------------------------------------->
<!--<!– 表单新增属性–>-->
<!--<input type="text" class="name" />-->
<!--
placeholder:提示文字(占位符)
autofocus:自动获取焦点
autocomplete: 自动完成(填充的) on 开启(默认) off 取消自动提示
required: 必填
multiple: 多选
novalidate:关闭默认的验证功能(只能加给form)
pattern: 自定义正则验证
pattern="1\d{10}"
-->
<!--<form action="" novalidate>-->
<form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
<!-- placeholder:提示文字(占位符) autofocus:自动获取焦点 应用-->
用户名:<input type="text" placeholder="例如:李狗蛋" autofocus name="userName" autocomplete="on" required/>
</label>
<!-- pattern: 自定义正则验证 pattern="1\d{10}" 应用-->
<label for="">
电话:<input type="tel" pattern="1\d{10}" />
</label>
<!-- 上次文件-->
<input type="file" name="file" multiple/>
<input type="submit" />
</fieldset>
</form>
</body>
</html>
html5表单
最新推荐文章于 2022-04-16 10:30:00 发布