3 表单详解

html表单
	为什么：
		提交数据给后台
	<form>
	<input> 元素是最重要的表单元素，每个<input>元素必须写一个 name 属性，不然不会被提交
	组合表单元素<fieldset>
			<form action="action_page.php" method="GET>
				<fieldset>//组合表单的输入元素
				<legend>Personal information:</legend>//组合后的名字
				<input type="text" name="firstname">//输入input元素必须设置一个 name 属性，不写name的input元素不会被提交
				<input type="radio" name="sex" value="male" checked>Male
				<input type="submit" value="Submit">
				</fieldset>
			</form> 
			

html表单元素
	元素种类：
		<input>输入元素

		<textarea> 多行文本输入元素
			<textarea name="message" rows="10" cols="30">
				The cat was playing in the garden.
			</textarea>

		<button>  
			<button type="button" onclick="alert(‘Hello World!‘)">Click Me!</button>

		<datalist> 预定义选项列表
			<form action="action_page.php">
			<input list="browsers">
			<datalist id="browsers">
				   <option value="Internet Explorer">
				   <option value="Firefox">
			</datalist> 
			</form>

		<select> 下拉列表
		<option> 待选择元素
			<select name="cars">
				<option value="volvo">Volvo</option>
				<option value="saab" selected>Saab</option>
			</select>

输入元素<input>的类型
	<form>
		<input type="text" name="firstname">
		<input type="password" name="psw">
		<input type="submit" value="Submit">
		<input type="radio" name="sex" value="male" checked>Male
		<input type="checkbox" name="vehicle" value="Bike">I have a bik
		<input type="button" onclick="alert(‘Hello World!‘)" value="Click Me!">
		<input type="number" name="quantity" min="1" max="5">
		<input type="date" name="bday">
		<input type="color" name="favcolor">
		<input type="range" name="points" min="0" max="10">
		<input type="month" name="bdaymonth">
		<input type="week" name="week_year">
		<input type="time" name="usr_time">
		<input type="datetime" name="bdaytime">
		<input type="datetime-local" name="bdaytime">
		<input type="email" name="email">
		<input type="search" name="googlesearch">
		<input type="tel" name="usrtel">
		 <input type="url" name="homepage">
	</form> 

<input>属性,输入属性
	属性
		value 
			value 属性规定元素的初始值
			<input type="text" name="firstname" value="John">
			
		readonly 
			readonly 属性规定元素为只读（不能修改）
			<input type="text" name="firstname" value="John" readonly>
			
		disabled 
			disabled 属性规定元素是禁用的
			被禁用的元素是不可用和不可点击的。
			被禁用的元素不会被提交
			<input type="text" name="firstname" value="John" disabled>
			
		size
			size 属性规定输入最多多少个字符
			<input type="text" name="firstname" value="John" size="40">
			
		maxlength 
			maxlength 属性规定元素允许的最大长度
			如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
			<input type="text" name="firstname" maxlength="10">
			
		autocomplete
			autocomplete 属性规定表单或元素能自动完成
			输入时能自动关联出用户之前填写的值		
			<form action="action_page.php" autocomplete="on">
			   First name:<input type="text" name="fname"><br>
			   E-mail: <input type="email" name="email" autocomplete="off"><br>
			   <input type="submit">
			</form> 
			
		novalidate 
			novalidate：在提交表单时不对表单数据进行验证
			<form action="action_page.php" novalidate>
			   E-mail: <input type="email" name="user_email">
			   <input type="submit">
			</form> 
			
		autofocus 
			autofocus 输入时该元素能自动获得焦点。
			First name:<input type="text" name="fname" autofocus>
			
		form
			form 属性规定元素属于一个或多个表单
			如需引用一个以上的表单，请使用“ ”空格分隔的表单 id 列表
			<form action="action_page.php" id="form1">
			   First name: <input type="text" name="fname"><br>
			   <input type="submit" value="Submit">
			</form>
				Last name: <input type="text" name="lname" form="form1">
				
		formaction 
			formaction 属性规定向哪个 URL提交表单，会覆盖action属性
			<form action="action_page.php">
			   First name: <input type="text" name="fname"><br>
			   Last name: <input type="text" name="lname"><br>
			   <input type="submit" value="Submit"><br>
			   <input type="submit" formaction="demo_admin.asp" value="Submit as admin">
			</form> 
			
		formenctype 
			formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）
			formenctype 属性覆盖 <form> 元素的 enctype 属性
			<form action="demo_post_enctype.asp" method="post">
			   First name: <input type="text" name="fname"><br>
			   <input type="submit" value="Submit">
			   <input type="submit" formenctype="multipart/form-data"
			   value="Submit as Multipart/form-data">
			</form> 
			
		formmethod 
			formmethod 属性定义get方式还是post方式提交给action。
			formmethod 属性覆盖 <form> 元素的 method 属性。
			<form action="action_page.php" method="get">
			   First name: <input type="text" name="fname"><br>
			   Last name: <input type="text" name="lname"><br>
			   <input type="submit" value="Submit">
			   <input type="submit" formmethod="post" formaction="demo_post.asp"
			   value="Submit using POST">
			</form>
			
		formnovalidate 
			formnovalidate属性规定在提交表单时不对 <input> 元素进行验证
			formnovalidate 属性覆盖 <form> 元素的 novalidate 属性
			<form action="action_page.php">
			   E-mail: <input type="email" name="userid"><br>
			   <input type="submit" value="Submit"><br>
			   <input type="submit" formnovalidate value="Submit without validation">
			</form> 
			
		formtarget 
			formtarget 属性规定何处显示接收到的响应
			<form action="action_page.php">
			   First name: <input type="text" name="fname"><br>
			   Last name: <input type="text" name="lname"><br>
			   <input type="submit" value="Submit as normal">
			   <input type="submit" formtarget="_blank"
			   value="Submit to a new window">
			</form> 
			
		height 和 width 
			height 和 width 属性规定 <input> 元素的高度和宽度，仅对图片有效
			把图像定义为提交按钮
			<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
			
		list
			list 属性引用的 <datalist> 元素id或name
			设置预定义值
			<input list="browsers">
			<datalist id="browsers">
			   <option value="Internet Explorer">
			   <option value="Firefox">
			   <option value="Chrome">
			   <option value="Opera">
			   <option value="Safari">
			</datalist> 
			
		min 和 max
			min 和 max 属性规定 <input> 元素的最小值和最大值
			Enter a date before 1980-01-01:
			<input type="date" name="bday" max="1979-12-31">
			 Enter a date after 2000-01-01:
			<input type="date" name="bday" min="2000-01-02">
			 Quantity (between 1 and 5):
			<input type="number" name="quantity" min="1" max="5">
			
		multiple 
			multiple属性规定允许用户在 <input> 元素中输入一个以上的值
			<input type="file" name="img" multiple>
			
		pattern （模式）
			pattern属性用于检查元素中输入的值符合正则
			<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
			
		placeholder 
			placeholder 属性元素的输入提示。
			该提示会在用户输入值之前显示在输入字段中
			<input type="text" name="fname" placeholder="First name">
			
		required 
			required 属性规则该元素为必填项
			<input type="text" name="usrname" required>
			
		step 
			step 属性规定元素的合法数字间隔
			<input type="number" name="points" step="3">
			
<input>元素的常用的输入限制
disabled	元素应该被禁用。
max	元素输入的最大值。
min	元素输入的最小值。
maxlength	元素输入的最大字符数。
pattern	规定通过其检查输入值的正则表达式。
readonly	该元素为只读（无法修改）。
required	该元素是必需的（必需填写）。
size	该元素的宽度（以字符计）。
step	该元素的合法数字间隔。
value	该元素的默认值。