表单中的标签及其常用属性汇总

最新推荐文章于 2025-05-18 10:27:19 发布

原创最新推荐文章于 2025-05-18 10:27:19 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML标签 #HTML属性

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文汇总了HTML表单中的常用元素及其属性，包括不同类型的input标签、textarea、label、fieldset等，并提供了直观的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单是HTML中非常重要的一环，而且内容也不算少，所以在这里就简单的汇总了常用的表单标签，至于它们的属性就列举的很少了，如果想要详细学习属性，推荐到w3cschool去查看学习。这是w3cschool中关于表单一节的链接：点击打开链接

下面是我用HTML文档列举的表单标签，可拷到本地跑一下，直观感受一下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单元素及其常用属性汇总</title>
	<style type="text/css">
		body{background-color: #7FFFFFFF;}
		h3{background-color: yellow;text-align: center;}
		div{text-align: center;width:300px;margin: 0 auto;}
		hr{margin: 30px 0px;}
	</style>
</head>
<body>
	<form action="" autocomplete="" method="" target="" >
		<div class="inputDiv">
			<h2>不同类型input</h2>
			<h3>复选框:</h3>
			<input type="checkbox" name="vehicle" value="Bike">我有一辆自行车<br>
			<input type="checkbox" name="vehicle" value="Car">我有一辆小轿车<br>
			<input type="checkbox" name="vehicle" value="Boat">我有一艘船<br>
			<h3>颜色：</h3>
			<input type="color" name="favcolor">
			<h3>日期：</h3>
			<input type="date" name="bday"><br>
			<input type="datetime" name="bdaytime"><br>
			<input type="datetime-local" name="bdaytime"><br>
			 <input type="time" name="usr_time"><br>
			<h3>邮件:</h3>
			<input type="email" name="usremail"> 
			<h3>文件：</h3>
			<input type="file" name="img" multiple>(multiple上传多个文件)<br>
			<h3>隐藏：</h3>
			<input type="hidden" name="country" value="Norway"><br>
			<h3>图片：</h3>
			<input type="image" src="submit.gif" alt="picture"><br>
			<h3>月份：</h3>
			<input type="month" name="bdaymonth"><br>
			<h3>数字：</h3>
			<input type="number" name="quantity" min="1" max="5">(max - 规定允许的最大值。min - 规定允许的最小值。step - 规定合法数字间隔。value - 规定默认值。)<br>
			<h3>密码：</h3>
			<input type="password" name="pwd"><br>
			<h3>单选：</h3>
			<input type="radio" name="gender" value="女"> 女
			<input type="radio" name="gender" value="男"> 男<br>
			<h3>数字范围：(属性和number相同)</h3>
			<input type="range" name="points" min="1" max="10"><br>
			<h3>重置：</h3>
			<input type="reset" value="重置"><br>
			<h3>搜索：</h3>
			<input type="search" name="googlesearch"><br>
			<h3>提交：</h3>
			<input type="submit" formaction=""><br>
			<h3>电话：</h3>
			<input type="tel" name="usrtel"><br>
			<h3>文本：</h3>
			<input type="text" name="fname"><br>
			<h3>URL:</h3>
			<input type="url" name="homepage"><br>
			<h3>周(week)：</h3>
			<input type="week" name="week_year"><br> 
			<h3>按钮：</h3>
			<input type="button" name="btn" value="提交" formaction=""><br> 
		</div>
		<hr>
		<div>
			<h2>其他输入类型：</h2>
			<h3>textarea:</h3>
			<textarea rows="10" cols="30">我是一个文本框。</textarea><br>
			<h3>label:</h3>
			<label for="male">Male</label>
  			<input type="radio" name="sex" id="male" value="male"><br>
  			<h3>fieldset和legend：</h3>
  			<fieldset>
			  <legend>个人信息:</legend>
			  姓名: <input type="text"><br>
			  邮箱: <input type="text"><br>
			  生日: <input type="text">
			</fieldset>
			<h3>select、optgroup、option:</h3>
			<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>
			<h3>按钮：</h3>
			<button type="button" formaction="">点我!</button>
			<h3>datalist:</h3>
			<input list="browsers" name="browser">
			<datalist id="browsers">
			  <option value="Internet Explorer">
			  <option value="Firefox">
			  <option value="Chrome">
			  <option value="Opera">
			  <option value="Safari">
			</datalist>
			<h3>output:</h3>
			output 标签显示计算或用户操作的结果，该标签是 HTML5 中的新标签。
		</div>
	</form>
</body>
</html>