<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend>表单</legend>
<label>姓名:<input type="text" id="name" name="name"></label>
<br>
<label>年龄:<input type="text" id="age" name="age" value="27"></label>
</fieldset>
<hr>
<label>文本域:<textarea name="textarea" id="textarea" cols="30" rows="10">文本域默认值</textarea></label>
<hr>
<label>单选
<select name="category">
<option value="new" selected>新闻</option>
<option value="game">游戏</option>
</select>
</label>
<hr>
<label>多选
<select name="category[]" multiple>
<option value="new">新闻</option>
<option value="game" selected>游戏</option>
</select>
</label>
<hr>
<label>分组
<select name="category">
<optgroup label="新闻">
<option value="new">新闻</option>
<option value="game" selected>游戏</option>
</optgroup>
<optgroup label="研发">
<option value="mysql">mysql</option>
<option value="go" selected>go</option>
</optgroup>
</select>
</label>
<hr>
单选框:
<label>男<input type="radio" name="sex" value="boy" checked></label>
<label>女<input type="radio" name="sex" value="girl"></label>
<hr>
复选框:
<label>手机<input type="checkbox" name="user[]" value="mobile" checked></label>
<label>邮箱<input type="checkbox" name="user[]" value="email"></label>
<hr>
文件上传:
<label><input type="file" name="file[]" multiple="multiple" accept=".png"></label>
<hr>
日期选择器:
<label><input type="date" step="5" min="2021-01-01" max="2028-12-31" name="date"></label>
<hr>
datalist:
<label>
<input type="search" name="search" list="lesson" autocomplete="on">
<datalist id="lesson">
<option value="mysql"></option>
<option value="go"></option>
<option value="html">html语言</option>
</datalist>
</label>
<hr>
有序列表:
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<hr>
无序列表:
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<hr>
描述列表:
<dl>
<dt>生活</dt>
<dd>吃饭</dd>
<dd>睡觉</dd>
<dd>打豆豆</dd>
<dt>学习</dt>
<dd>go</dd>
<dd>html</dd>
<dd>css</dd>
</dl>
<hr>
<button type="submit">提交表单</button>
</form>
</body>
</html>
