总结了下html表单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dada</title>
</head>
<body>
<form action="action.php" method="post" accept-charset="UTF-8" autocomplete="on" enctype="url-encoded" target="_self">
<!--组合表单中的相关数据-->
<fieldset>
<!--为fieldset元素定义标题-->
<legend>hello</legend>
<!--文本输入-->
firstname:<input type="text" name="firstname"><br>
<!--单选按钮输入-->
<input type="radio" name="male">male
<input type="radio" name="female">female<br>
<!--复选框-->
<input type="checkbox" name="vehicle" value="bike">i have a bike.
<input type="checkbox" name="vehicle" value="car">i have a car<br>
<!--按钮-->
<input type="button" onclick="alert('hello')" value="click me"><br>
<!--提交按钮-->
<input type="submit" name="submit"><br>
<!--下拉列表-->
<select name="fruit">
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="watermelon" selected="">watermelon</option>
<option value="cherry">cherry</option>
</select><br>
<!--文本域-->
<textarea name="message" rows="10" cols="30">
the cat was playing in the garden.
</textarea><br>
<!--可点击的按钮-->
<button type="button" onclick="alert('hello')">
click me!
</button><br>
<!--html5新增-->
<!--datalist元素为input元素预定义选项列表-->
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="firefox">
<option value="chorme">
<option value="opera">
<option value="safari">
</datalist><br>
<form>
<!--输入类型number用于包含数字值-->
<input type="number" name="quantity" min="1" max="5" step="10" value="30">number<br>
<!--输入类型date用于包含日期-->
<input type="date" name="cday" max="1980-1-1" min="2018-7-2">date<br>
<!--输入类型color用于包含颜色-->
<input type="color" name="favcolor">color<br>
<!--输入类型range用于包含一定范围内的值的输入字段-->
<input type="range" name="points" min="0" max="10" step="2" value="8">range<br>
<!--输入类型month允许用户选择年月-->
<input type="month" name="cdaymonth">month<br>
<!--输入类型week允许用户使用周和年-->
<input type="week" name="week_year">week<br>
<!--输入类型time允许用户选择时间(无时区)-->
<input type="time" name="usr_time">time<br>
<!--输入类型datetime允许用户选择日期和时间(有时区)-->
<input type="datetime" name="cday">datetime<br>
<!--输入类型datetime-local允许用户选择时间-->
<input type="datetime-local" name="cday">datetime-local<br>
<!--输入类型email用于包含电子邮件地址-->
<input type="email" name="email">email<br>
<!--输入类型search用于搜索字段-->
<input type="search" name="search">search<br>
<!--输入类型tel用于电话号码输入-->
<input type="tel" name="tel">tel<br>
<!--输入类型url,根据浏览器支持,提交时自动验证url-->
<input type="url" name="url">url<br>
<!--file-->
<input type="file" name="file">
</fieldset>
</form>
</body>
</html>
效果如下
更多专业前端知识,请上 【猿2048】www.mk2048.com