HTML中form表单的基本用法

HTML中form表单的基本用法

---

<form action="" method="get" onactivate>
		<input type="url" />
		<input type="submit"value="提交" />
	</form>

1. action：定义了在提交表单是，应该把数据发送到哪个URL或模块去处理
2. method：定义了发送数据的http方法——get和post
3. novalidate：决定了提交表单是需不需要验证表单，默认验证

---

<form action="" method="get" novalidate>
		<input autofocus type="text" /><br>
		<input disabled type="text"/><br>
		<input name="inputValue" type="text" /><br>
		<input value="吴彦祖" name="inputValue1" type="text"/><br>
		<input type="submit" value="提交"/>
	</form>

常用原生的表单部件元素的属性

1. autofocus：页面加载时元素会自动具备输入焦点，页面最好只有一个
2. disabled：用户不能再和元素进行交互
3. name：元素的值和表单数据一起提交，并且以键值对的形式传递
4. value:决定了元素的初始值
   

---

		<!-- 当行文本框 -->
		单行文本框：<input type="text" />

---

<!-- 密码框 -->
		密码框：<input type="password" name="" id="" value="" />

---

		<!-- 不显示的空间，但值仍然会提交到服务器里去 -->
		<input type="hidden" name="UserID"value="666" />

---

		<!-- 通过name属性值对radio进行分组操作，允许在拥有相同name值的选项中选其中的一个 -->
		<input type="radio" name="gender" id="" value="1"/>男
		<input type="radio" name="gender" id="" value="2"/>女

---

<!-- 复选框 可设置选中还是未选中 -->
		<!-- checked 用于设置单选框或者多选框是否被选中 -->
		<input  checked type="checkbox" name="hobby" id="" value="1" />Java
		<input checked type="checkbox" name="hobby" id="" value="2" />Python
		<input type="checkbox" name="hobby" id="" value="3" />C语言
		<input type="checkbox" name="hobby" id="" value="4" />Go语言
		

---

颜色选择器：<input type="color" name="" id="" value="" />

---

日期选择器（年月日）：<input type="date" name="" id="" value="" />

---

月选择器：<input type="month" name="" id="" value="" />

---

邮件收入：<input type="email" name="" id="" value="" />

---

文件上传：<input type="file" name="" id="" value="" />

---

  数字控件：<input type="number" name="" id="">

---

搜索框：<input type="search" name="" id="" value="" />

---

		<input type="url" name="" id="" value="" /><br>
		<input type="submit" name="" id="" value="提交" /><br>
		<input type="reset" name="" id="" value="重置" /><br>
		<input type="button" name="" id="" value="普通按钮" />

---

<!-- fieldset 用于分割表单，legend 定了表单的小标题 -->
	<form action="" method="">
		<fieldset id="">
			<legend>这是一个表单的标题</legend>
			<input autofocus type="text" /><br>
			<input disabled type="text"/><br>
			<input name="inputValue" type="text" /><br>
			<input value="吴彦祖" name="inputValue1" type="text"/><br>
			<input type="submit" value="提交"/>
		</fieldset>
	</form>

---

<!-- label标签的for属性与input标签的id属性可以产生相关联的效果 -->
		<form action="" method="">
			<label for = "username">姓名：</label>
			<input type="" name="" id="username" value="text" />
			<br>
			<label>密码：</label>
			<input type="password" name="" id="" value="" />
		</form>

---

<!-- button disable不可用 type：submit reset button 通过name 和 value 传值给服务器 -->
		<form action="" method="">
			<button disabled type="submit" name="" value="">提交</button>
			<button disabled type="reset" name="" value="">重置</button>
			<button disabled type="button" name="" value="">按钮</button>
			
		</form>

---

<!-- 多行文本框 -->
		<form action="" method="">
			  <textarea style="resize: none;" name="textareaValue" id="" cols="10" rows="10"></textarea>
		</form>

1. clos:文本域的宽度，多少列，默认为20列
2. rows：文本域的高度，多少行
3. style=“resize:none;” 阻止多行文本域自由缩放
4. textarea中，只接受纯文本的内容，任何HTML内容都会被显示成纯文本内容
   

---

	<h1>下拉内容</h1>
			下拉单选框
			<select name="selectValue1">
				<option value="">选项一</option>
				<option value="">选项二</option>
				<option value="">选项三</option>
				<option value="">选项四</option>
			</select>

---

			下拉多选框
			<!-- multiple 是否多选 -->
			<select multiple name="selectValu2">
				<option value="">选项一</option>
				<option value="">选项二</option>
				<option value="">选项三</option>
				<option value="">选项四</option>
			</select>

---

			<!-- input 中 list 的值要和 datalist的id保持一致，
			 一旦数据列表与表单小部件相关联，就可以实现模糊搜索的功能
			 -->
			自动补全输入框
			<input type="text" list="mySelect" name="" id="" value="" />
			<datalist id="mySelect">
				<option value="">选项一</option>
				<option value="">选项二</option>
				<option value="">选项三</option>
				<option value="">选项四</option>
			</datalist>

---

		<!--
		  enctype 属性 是在method的属性为post时，决定了表单的提交给服务器的MIME类型是什么
		  application/x-www-form-urlencoded 未指定属性默认值
		  multipart/form-data 如果表单中包含文件上传的功能（type="file"）必须使用此值
		  text/plain 常用于测试
		-->
		<form action="" enctype="application/x-www-form-urlencoded"></form>
		<form action="" enctype="multipart/form-data"></form>
		<form action="" enctype="text/plain"></form>

---