<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!-- 表示支持中文-->
<title>my page</title>
</head>
<body>
<header>中文</header>
<form>
<fieldset>
<legend>我是标题</legend><!-- legend表示fieldset的标题-->
姓名:<br> <!-- br表示换行-->
<input type="text" name="yourName">
<br>
年龄:<br>
<input type="text" name="yourAge"><!-- text表示单行文本框 不支持换行符-->
</form>
<form>
<label for="femal">女</label><!-- id==for-->
<input type="radio" name="sex" id="femal"/>
<br />
<label for="male">男</label>
<input type="radio" name="sex" id="male"/>
<br>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" multiple><!-- 多个邮箱之间用,-->
<br>
<label for="pwd">密码</label>
<input type="password" id="pwd" name="pwd">
<br>
<label for="serach">搜索</label>
<input type="search" id="search" name="search">
<br>
<label for="tel">电话</label>
<input type="tel" id="tel" name="tel">
<br>
<label for="tel">电话</label>
<input type="url" id="url" name="url">
<label for="myColor">What's your favorite color?</label>
<input type="text" name="myColor" id="myColor" list="mySuggestion"> <!-- 选择框 list==datlist id-->
<datalist id="mySuggestion">
<option>black</option>
<option>blue</option>
<option>green</option>
<option>red</option>
<option>black</option>
<option>yellow</option>
</datalist>
<!-- <input type="checkbox" checked>:复选框-->
<!-- <input type="radio" checked>:单选框-->
<br>
<fieldset>
<legend>What is your favorite color?</legend>
<ul><!-- ul定义无序列表 -->
<li><!-- li定义列表项目可以与ol ul使用 -->
<label for="red">red</label>
<input type="radio" checked id="red" name="color" value="red"> <!-- checked表示默认值， 个颜色的name值一致-->
</li>
<li>
<label for="yellow">yellow</label>
<input type="radio" id="yellow" name="color" value="yellow">
</li>
<li>
<label for="blue">blue</label>
<input type="radio" id="blue" name="color" value="blue">
</li>
</ul>
<input type="reset" value="This is a reset button">
<button type="button">
This a anonymous button
</button>
</fieldset>
<button type="submit">
This a submit button
</button>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!-- 表示支持中文-->
<title>my page</title>
</head>
<body>
<header>中文</header>
<form>
<fieldset>
<legend>我是标题</legend><!-- legend表示fieldset的标题-->
姓名:<br> <!-- br表示换行-->
<input type="text" name="yourName">
<br>
年龄:<br>
<input type="text" name="yourAge"><!-- text表示单行文本框 不支持换行符-->
</form>
<form>
<label for="femal">女</label><!-- id==for-->
<input type="radio" name="sex" id="femal"/>
<br />
<label for="male">男</label>
<input type="radio" name="sex" id="male"/>
<br>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" multiple><!-- 多个邮箱之间用,-->
<br>
<label for="pwd">密码</label>
<input type="password" id="pwd" name="pwd">
<br>
<label for="serach">搜索</label>
<input type="search" id="search" name="search">
<br>
<label for="tel">电话</label>
<input type="tel" id="tel" name="tel">
<br>
<label for="tel">电话</label>
<input type="url" id="url" name="url">
<label for="myColor">What's your favorite color?</label>
<input type="text" name="myColor" id="myColor" list="mySuggestion"> <!-- 选择框 list==datlist id-->
<datalist id="mySuggestion">
<option>black</option>
<option>blue</option>
<option>green</option>
<option>red</option>
<option>black</option>
<option>yellow</option>
</datalist>
<!-- <input type="checkbox" checked>:复选框-->
<!-- <input type="radio" checked>:单选框-->
<br>
<fieldset>
<legend>What is your favorite color?</legend>
<ul><!-- ul定义无序列表 -->
<li><!-- li定义列表项目可以与ol ul使用 -->
<label for="red">red</label>
<input type="radio" checked id="red" name="color" value="red"> <!-- checked表示默认值， 个颜色的name值一致-->
</li>
<li>
<label for="yellow">yellow</label>
<input type="radio" id="yellow" name="color" value="yellow">
</li>
<li>
<label for="blue">blue</label>
<input type="radio" id="blue" name="color" value="blue">
</li>
</ul>
<input type="reset" value="This is a reset button">
<button type="button">
This a anonymous button
</button>
</fieldset>
<button type="submit">
This a submit button
</button>
<!--or-->
<input type="submit" value="This is a submit button">
<button type="reset">
This a reset button
</button>
<button type="reset">
This a reset button
</button>
<!--or-->
<input type="reset" value="This is a reset button">
<button type="button">
This a anonymous button
</button>
<button type="button">
This a anonymous button
</button>
<!--or-->
<input type="button" value="This is a anonymous button">
</form>
</body>
</html>
</form>
</body>
</html>