<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input:disabled {
background-color: gray;
}
</style>
</head>
<body>
<!--//1、datalist-->
<input type="text" list="li">
<datalist id="li">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</datalist>
<!-- <select name="" id="">
<option value="">lover</option>
</select>-->
<!--2、mark 强调-->
<p>fuck<mark>you</mark>mother</p>
<!-- 3、progress 进度条 max最大值 value 当前值-->
<progress max="100" value="30"></progress>
<!--4、time 代表包含内容表示一个时间-->
<!-- <time datetime="2016-10-01">
国庆节
</time>-->
<!--5、表单-->
<form action="">
<!--type=number 表示这个输入框只能输入数字相关的内容-->
number: <input type="number"><br>
<!--type=range 表示滑块控件 step:每次滑动的步长 value:当前值-->
<input type="range" min="1" max="100" value="50" step="10"></input><br>
<!--type="date" 会调出一个日历控件-->
date:<input type="date">
<input type="week">
<input type="month">
<input type="datetime-local">
<!-- <input type="datetime">-->
<input type="time"><br>
<!--type="color" 调用颜色插件 进行颜色选择-->
color: <input type="color">
<br>
<!--type="search" 表示搜索框 当输入内容后会显示X 表示删除输入内容 -->
search:<input type="search">
<br>
<!--type="email" 验证email 格式 在移动端会调用相应的快捷输入法 -->
email:<input type="email">
<br>
<!--type="url 验证url 格式"-->
url:<input type="url">
<br>
<!--tel 验证电话输入框-->
tel:<input type="tel">
<input type="submit">
<br>
<!--6 form-->
<!--autocomplete="on" 如果设置在form上 form下的所有输入框都将开启自动补全功能 -->
<form action="" autocomplete="on" id="form01">
<!--开启输入框自动补全功能 必须设置name属性-->
<input type="text" autocomplete="on" name="user">
<br>
<!--autofocus="autofocus" 自动获取焦点-->
<input type="text" name="password" autofocus="autofocus">
<br>
<!--required="required" 必须输入后才能提交-->
<!--<input type="" placeholder="请输入性别" required="required">-->
<br>
<!--pattern="\d+" 给输入框输入正则表达式 配合正则表达式使用-->
<input type="tel" pattern="\d+" placeholder="此输入框只限输入数字">
<br>
<!-- disabled="disabled" 属性表示被禁用-->
<input type="text" disabled="disabled">
<br>
<!-- readonly="readonly" value="这是一个只读输入框"-->
<input type="text" readonly="readonly" value="这是一个只读输入框">
<br>
<input type="submit">
</form>
<!--form="fuck" 属性指定了输入框 属于哪个form表单 input的form 属性必须指定为所属的form表单的id值-->
<input type="text" form="form01" required="required">
</form>
</body>
</html>
网友评论