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

本文汇总了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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值