form表单

form表单标签是所有标签最核心的标签之一，它是用来实现前后端交互的一个重要标签。

常用属性:

• name :表单名称
• action：表单数据提交的地方（通常是一个后台文件名 .jsp /.php/.asp/.py等，或地址）如果是#，表示提交到当前文件下
• method:前端提交到后端的方法，主要有 get和post,默认是get。

<form name="myFrom" action="new_file_login.html" method="get">
			 <input type="text" name="userName" placeholder="请输入姓名" />
			 <input type="submit" />			 
 </form>		

表单元素分类

1）input类：

主要用在输入，选择或发出指令。

type: text / password / radio / checkbox / file / button / image / submit /reset

​ a. text：单行文本输入框 type=“text” 可以不写，默认值。

属性值: placeholder(提示) / name(命名) / minlength和 maxlength （最少和最多输入的字符个数）/ disabled(失效) / readonly(只读) / value(默认值) / pattern (正则匹配)

<!-- 1.文本框 -->
<input type="text" name="test" placeholder="请输入一个数字"  value="100" disabled="disabled"/> <br/>
<input type="text" name="test" placeholder="请输入一个数字"  value="100" readonly="readonly"/> <br/>
<input type="text" name="test" placeholder="请输入一个数字"  value="100"  minlength="1" maxlength="5"/> <br/>					

​ b. password:密码框 属性和text一样

<!-- 2.密码框 -->
<input type="password" /><br />

​ c. radio:单选框，通常是两项以上，常用属性有：name(必须要有) / value(值) / checked(选中) / disabled(失效) / readonly(只读)

<!-- 3.单选框 -->
<input type="radio" name="sex" checked="checked" /> 男
<input type="radio" name="sex" /> 女 <br />

​ d. checkbox:复选框，可以用来选中0项、1项或多项。

常用属性有：name(必须要有) / value/ checked(默认选中) / disabled(失效) / readonly(只读)

<!-- 4. 复选框 多选-->
<input type="checkbox" name="hobby" checked="checked" /> 听音乐
<input type="checkbox" name="hobby" checked="checked" /> 玩游戏
<input type="checkbox" name="hobby" /> 其他 <br />

​ c. file:文件上传按钮

<!-- 5.文件上传 -->
<input type="file" name="file" /> <br />

​ e. button：普通按钮，通常用它去调用脚本代码。

常用属性有： value（按钮的标题） / disabled(失效)

<!-- 6.普通按钮 -->
<input type="button" name="btn" value="禁用" disabled />
<input type="button" name="btn" value="登录" /><br />

​ g. image: 图片按钮，用法和button一样。有一个特殊属性：src（用来加载提示图片，用它替换了value）。它有提交功能，与submit一样。

<!-- 7.图片按钮 -->
<input type="image" src="../img/Java.jpeg" width="50px" title="刷新" /><br />

​ h. submit: 提交按钮，用来将表单数据提交到后台。

常用属性有： value（按钮的标题） / disabled(失效)

<!-- 8.提交按钮 -->
<input type="submit" name="submit" value="我的提交" />

​ j. reset: 重置按钮。将表单所有组件作为输入的内容全部清空，还原为初始状态。

常用属性有： value（按钮的标题） / disabled(失效)

<!-- 9.重置按钮 -->
<input type="reset" name="reset" value="我的重置" /><br />

2)textarea类

文本域（也叫多行文本框），主要用于输入大批量的内容。

常用属性：name / id / cols(列数) / rows(行数) / placeholder / minlength / maxlength / required(必须输入)

<textarea name="textarea" placeholder="请输入备注" cols="20" rows="5" required="required">默认内容</textarea>

3)select 类

下拉列表框，默认用于单项选择，用option呈现每个选项。

multiple属性：表示可以多选，这时的下拉列表变成了列表框

size:最多显示的行数

<form action="#">
	<label for="person_sex">性别:</label>
	<select id="person_sex">
			<option value="1">男</option>
			<option value="2">女</option>
	</select>

	<label for="langeage">编程语言</label>
	<select id="langeage" multiple size="7">
			<option value="java">java</option>
			<option value="html">html</option>
			<option value="python">python</option>
			<option value="其他">其他</option>
	</select>
</form>

4)button类

button :普通按钮，具有提交功能，可以单独使用，不写在form元素中；如果写在form中，有提交功能。

	<button>普通按钮</button>
		<form action="new_file.html">
			<input type="text" name="info1" />
			<!-- 这里的button功能与input中的submit按钮功能一样 -->
			<button>提交</button>
			<input type="text" name="info2" />
			<input type="submit" />
		</form>