HTML 标签大全
表单
- <form> 定义一个 HTML 表单,用于用户输入。
- <input> 定义一个输入控件
- <textarea> 定义多行的文本输入控件。
- <button> 定义按钮。
- <select> 定义选择列表(下拉列表)。
- <optgroup> 定义选择列表中相关选项的组合。
- <option> 定义选择列表中的选项。
- <label> 定义 input 元素的标注。
- <fieldset> 定义围绕表单中元素的边框。
- <legend> 定义 fieldset 元素的标题。
- <datalist> 规定了 input 元素可能的选项列表。
- <output> 定义一个计算的结果
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码示例</title>
</head>
<body>
<!-- form 定义一个 HTML 表单,用于用户输入。 -->
<form action="demo-form.php" method="post">
input 允许用户输入数据。改变type 值实现不同的用途
账号: <input type="text" name="Name" value=""><br>
密码: <input type="password" name="password" value=""><br>
<input type="submit" value="提交"><br>
<hr>
一个 textarea 文本区域:<br>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<hr>
一个button按钮:<br>
<button type="button">点我!</button>
<hr>
创建带select选择列表:<br>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<hr>
通过 optgroup标签把相关的选项组合在一起:<br>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<hr>
创建带有 4 个选项的选择列表:<br>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<hr>
label信息提示:<br>
<label for="male">Male</label>
<hr>
fieldset对表单中的相关元素进行分组,legend定义主题:<br>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<hr>
datalist中描述 input元素可能的值:<br>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<hr>
将计算结果显示在output 元素中:<br>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html>