html表单总结

总结了下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>

效果如下

<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> <input type="file" name="file"> </fieldset> </form> </body>

posted on 2018-07-02 19:13  breathee  阅读(344)  评论(0编辑  收藏  举报

导航