<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他常用表单项标签演示</title>
</head>
<body>
<form action="#" method="get" autocomplete="off">
所在城市：<select name="city">
<option>---请选择城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
</optgroup>
<optgroup label="省会市">
<option>杭州</option>
<option>武汉</option>
</optgroup>
</select>
<br/>
个人介绍：<textarea name="desc" rows="5" cols="20"></textarea>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>type属性演示</title>
</head>
<body>
<form action="#" method="get" autocomplete="off">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/> <br/>
<label for="password">密码：</label>
<input type="password" id="password" name="password"/> <br/>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"/> <br/>
<label for="gender">性别：</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
<input type="radio" name="gender" value="other"/>其他<br/>
<label for="hobby">爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐
<input type="checkbox" name="hobby" value="game"/>游戏 <br/>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday"/> <br/>
<label for="time">当前时间：</label>
<input type="time" id="time" name="time"/> <br/>
<label for="insert">注册时间：</label>
<input type="datetime-local" id="insert" name="insert"/> <br/>
<label for="age">年龄：</label>
<input type="number" id="age" name="age"/> <br/>
<label for="range">心情值(1~10)：</label>
<input type="range" id="range" name="range" min="1" max="10" step="1"/> <br/>
<label for="search">可全部清除文本：</label>
<input type="search" id="search" name="search"/> <br/>
<label for="tel">电话：</label>
<input type="tel" id="tel" name="tel"/> <br/>
<label for="url">个人网站：</label>
<input type="url" id="url" name="url"/> <br/>
<label for="file">文件上传：</label>
<input type="file" id="file" name="file"/> <br/>
<label for="hidden">隐藏信息：</label>
<input type="hidden" id="hidden" name="hidden" value="itheima"/> <br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../img/bg.png");
}
.center{
background: white;
width: 400px;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<div>
<img src="../img/logo.png"/>
</div>
<div class="center">
<div>注册详情</div>
<hr/>
<form action="#" method="get" autocomplete="off">
<div>
<label for="username">姓名：</label>
<input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/>
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/>
</div>
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/>
</div>
<div>
<label for="tel">手机：</label>
<input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/>
</div>
<hr/>
<div>
<label for="gender">性别：</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
</div>
<div>
<label for="hobby">爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" value="movie"/>电影
<input type="checkbox" name="hobby" value="game"/>游戏
</div>
<div>
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" value=""/>
</div>
<div>
<label for="city">所在城市：</label>
<select id="city" name="city">
<option>---请选择所在城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会市">
<option>西安</option>
<option>杭州</option>
<option>郑州</option>
<option>武汉</option>
</optgroup>
</select>
</div>
<hr/>
<div>
<label for="desc">个性签名：</label>
<textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同"></textarea>
</div>
<hr/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
