html表单教程
2022年5月25日大约 1 分钟约 350 字
查看以下示例：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form action="https://api.example.com/users/" method="post">
<fieldset>
<legend>用户注册:</legend>
<!--输入框 演示-->
<label>用户名:<input type="text" name="username" value="哈姆雷特"></label><br>
<label>密码:<input type="password" name="password"></label><br>
<label>年龄:<input type="number" name="age" value="30"></label><br>
<label>
邮箱：
<input list="mail" name="mail">
<datalist id="mail">
<option value="@qq.com">
<option value="@vip.qq.com">
<option value="@163.com">
<option value="@126.com">
</datalist>
</label><br>
<!--单选按钮 演示-->
男女：
<label><input type="radio" name="sex" value="man">男</label>
<label><input type="radio" name="sex" value="woman">女</label><br>
<!--多选按钮 演示-->
爱好：
<label><input type="checkbox" name="like" value="music">听音乐</label>
<label><input type="checkbox" name="like" value="trip">旅游</label><br>
<!--下拉菜单 演示-->
<label>
学历：
<select name="education">
<option value="gaozhong">高中</option>
<option value="dazhuan" selected>大专</option>
<option value="benke">本科</option>
</select>
</label><br>
<!--分组下拉菜单 演示-->
<label>
所在城市：
<select name="city">
<optgroup label="湖北省">
<option value="wuhan" selected>武汉</option>
<option value="huangshi">黄石</option>
</optgroup>
<optgroup label="四川省">
<option value="chengdu">成都</option>
<option value="changsha">长沙</option>
</optgroup>
</select>
</label><br>
<!--多行输入框 演示-->
<label>个人介绍：
<textarea id="description" name="description" rows="10" cols="30">在这里写个人介绍...</textarea>
</label>
<!--按钮演示-->
<input type="button" value="清空" onclick="document.getElementById('description').innerHTML=''">
<br>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</fieldset>
</form>
<button type="button" onclick="window.location.reload()" >刷新</button>
</body>
</html>