Day04
搜索框滑块和简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框滑块和简单验证</title>
</head>
<body>
<form action="1.初识.html">
<p>
<input type="password"name="pwd"value="123123" hidden>
</p>
<!-- 邮箱验证-->
<p>邮箱：
<input type="email" name="email" size="30"value="12@1" hidden>
</p>
<!-- URL-->
<p>URL:
<input type="URL" name="url" size="30">
</p>
<!-- 数字-->
<p>数字：
<input type="number" name="number" max="10" min="0"step="1">
</p>
<!-- 滑块
input type="range"-->
<p>滑块：
<input type="range" name="voice" min="0" max="100"step="2">
</p>
<!-- 搜索框-->
<p>搜索：
<input type="search"name="search">
</p>
<input type="submit">
</form>
</body>
</html>
表单的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的应用</title>
</head>
<body>
<form action="1.初识.html" method="get">
<!--readonly:只读不可更改
hidden:隐藏框-->
<p>名字:
<input type="text" name="username" value="admin" readonly hidden>
</p>
<p>密码:
<input type="password" name="pwd" value="123456" >
</p>
<!--disabled:禁用
checked:默认-->
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<input type="submit">
</form>
</body>
</html>
表单初级验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级验证</title>
</head>
<body>
<form action="1.初识.html">
<p>姓名：
<input type="text" name="name" placeholder="请输入名字：" required>
</p>
<p>电话：
<input type="text" name="tel" pattern=“^((d{3,4})|d{3,4}-)?d{7,8}$” >
</p>
<input type="submit">
</form>
</body>
</html>
浙公网安备 33010602011771号