表单是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>