HTML表单

表单控件

input表单控件
1.为单标签<input>
2.input可以通过type（类型）属性来变换形状

input控件
type的属性值（格式：<input type="属性值 ">）	：
name：控件的名称，表示同一组控件。其属性值由用户自定义。（注意：几个选项如若要在同一组控件，其用户自定义的属性值要相同）	
	 单选框 如果是一组我们通过相同的name值来实现（在radio中同一组控件只能选其中一个）
	checked 打开时已默认这个选项  （"checked="checked"）

"checked=“checked” :

表格形式

input控件（重点)

属性	属性值	描述
type	text	文本框
	password	密码
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submi	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	自定义	控件的名称
value	自定义	input控件在页面中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选项控件默认被选中的项
mexlength	正整数	控制允许输入是最多字符数

文本框和密码框

<P>用户名：<input type="text" value="请输入您的名字"><!-- value 默认值 文本框 --></P>
	<P>密&nbsp&nbsp&nbsp码：<input type="password"><!-- 密码框 --></P>

结果如下：

单选按钮和复选按钮

性&nbsp&nbsp&nbsp别：
    <input type="radio" name="sex">女
    <input type="radio" name="sex">男<br>
    <!-- 单选框 如果是一组我们通过相同的name值来实现-->
特&nbsp&nbsp&nbsp长:
	<input type="checkbox" name="hobby"> 跳舞 
	<input type="checkbox" name="hobby"> 篮球 
	<input type="checkbox" name="hobby">唱歌
	<!-- 复选框 可以同时选多个 -->

结果如下：

选填后如下：

input按钮

搜索：   <input type="button"  value="搜索" ><!-- 普通按钮 --><br>
		 <input type="submit" value="提交表单"><!-- 提交按钮 --><br>
		 <input type="reset" value="重置表单"><!-- 重置按钮 --><br>
		
上传头像：
		<input type="file"><!-- 文件按钮 -->
		 

转换如下：

<input type="image" src="水.jpg"><!-- 图像按钮 --><br>
		(注意：按钮中只有图像按钮可<input type="image" src="水.jpg">这样写 ’ src=" ” ’ ）

label标签

	<label> 输入：<input type="text" /> </label>
	<label for="two"> 输入：<input type="text" /> <input type="text" id="two" />  </label>
	（提示
	1.用label直接进行包裹input 就可以了
	2.如果label里有多个可以表单，想定位到某个 可以通过for id 的格式来进行）

textarea控件（文本域)(为双标签）

语法格式：
     <textarea cols="每行字符数" rows="显示行数">文本内容</textarea>

下拉菜单selec

注意：<select></select>内至少包含一对<option></option>
	 	  在option内定义selected="selected",当前项即为默认选中项

表单域form

属性：action（指定接受并处理表单数据的服务器的urt地址）
method（表单提交方式属性值有get“get 速度快，但是会显示表单里面 的内容，不安全不能做密码提交”和post“post 速度慢，但是不会显示内容，安全性较高”
（注意：每个表单都应该有自己的表单域。表单里有很多form用name来区别）

<h2>表单域</h2>
	<form method="post" action="水.png">
		<p>用户名：<input type="text" name="usename"></p>
		<p>密&nbsp码：<input type="password" name="pud"></p>
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	</form>

结果如下：

三个文本域：

1. 文本域 textarea 留言的
2. 文件域 input type=“file" 上传文件的
3. 表单域 form 收集表单控件信息 并且提交

fieldset元素

<fieldset>
		<legend>用户登录</legend>
		用户名：<input type="text" name=""><br> <br>
		密&nbsp码：<input type="password" name="">
	</fieldset>

转换结果如下：

html5新增标签

<form action="">
		<fieldset>
			<legend>学生档案</legend>
			<label>姓名：<input type="text" placeholder="请输入学生姓名"></label><br>
			<label>手机号：<input type=" tel"><br></label>
			<label>邮箱：<input type="email"><br></label>
			<label>专业：<input type="text"  placeholder="请选择学院" list="a"></label>
			<datalist id="a">
				<option>计算机</option>
				<option>医学</option>
				<option>广告设计</option>
				<option>人才资源管理</option>		 
			</datalist><br>
			<label>出生日期：<input type="date"></label><br>
			<label>成绩：<input type="number"></label><br>
			<label>毕业时间:<input type="date"></label><br>
			<input type="submit" name=""><input type="reset">
		</fieldset>		

转换如下：