console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级表单</title>
</head>
<body>
<form action="">
<fieldset>
<legend>表单分组标题</legend>
<p><label for="username">用户名：</label><input type="text" id="username"></p>
<p><label for="pwd">密码：</label><input type="password" id="pwd"></p>
</fieldset>
<fieldset>
<legend>新增表单类型</legend>
<p>颜色拾色器：<input type="color"></p>
<p>邮箱验证：<input type="email"></p>
<p>数字域：<input type="number"></p>
<p>电话号码：<input type="tel"></p>
<p>网址：<input type="url"></p>
<p>搜索框：<input type="search"></p>
<p>数值选择： <input type="range" oninput="span.innerText=this.value" min="0" max="1000"><span id="span"></span></p>
<p>日期：<input type="date"> <input type="week"> <input type="month"> <input type="time"></p>
<p>文件上传：<input type="file"></p>
</fieldset>
<fieldset>
<legend>新增属性</legend>
<p>用户提示信息：<input type="text" placeholder="请输入用户名"></p>
<p>自动获取焦点：<input type="text"></p>
<p>允许上传多个文件： <input type="file" multiple></p>
<p>不能为空验证：<input type="text" required ></p>
<p>正则验证：<input type="text" pattern="1[3-9]\d{9}"></p>
</fieldset>
<p><input type="reset"> <input type="submit"></p>
</form>
</body>
</html>