1.1-HTML表单

一、input 元素

1）文本输入框 （type="text"）

用户名：<input type="text" id="username" name="username" />

注意：①、设置name属性通常用来将文本的数据提交给后台程序，或者是后台程序将数据回显到表格中

           ②、设置id属性 通常与<label></label>标签一起使用，当鼠标点击文字时，光标自动聚焦到文本输入框中，例如：

<label for="username">用户名：</label><input type="text" id="username" name="username" /> <br />

           ③、id属性还可能应用在js中（用于设置或者获取文本框中的值）或者用于css样式选择器

           ④、name属性值通常与id属性值一致（可以不一致），一致的原因纯粹是为了编码方便

⑤、将文本框设置为只读，添加 readonly 属性

<label for="age">年龄：</label><input type="text" id="age" name="age" value="25" readonly /> <br />

⑥、文本输入框的提示信息，添加 placeholder 属性

<label for="phone">联系方式：</label><input type="text" id="phone" name="phone" placeholder="填写时需要加上区号" /> <br />

2）密码框 （type="password"）

<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" placeholder="请输入6-10位密码" /> <br />

注意：无论是文本框或者密码框，输入信息的校验都由js代码完成，placeholder属性只是作为输入时的提示信息

          3）隐藏域（type="hidden"）

<input type="hidden" id="uid" name="uid" value="10086"/>

注意：隐藏域的值在页面中是不显示的

          4）单选框（type="radio"）

性别：<input type="radio" id="f" name="sex" value="f" /><label for="f">男</label>
<input type="radio" id="m" name="sex" value="m" checked /><label for="m">女</label> <br />

注意：①、name属性值要设置成一样才能有互斥效果，提交数据到后台也是需要name的值

           ②、value属性的值是提交到后台的值，例如单选选择女然后提交，那么提交的数据是 sex=m

5）复选框（type="checkbox")

兴趣爱好：<input type="checkbox" name="interest" value="reading" /> 读书
	 <input type="checkbox" name="interest" value="running" /> 跑步
         <input type="checkbox" name="interest" value="shopping" /> 购物
	 <input type="checkbox" name="interest" value="film" /> 看电影
	 <input type="checkbox" name="interest" value="swimming" /> 游泳
        <br />

注意：复选框提交的数据，后台需要数组或集合类型数据来接收

---

二、select 元素（下拉框）

1）简单的下拉框

籍贯：  <select name="birthplace">
         <option selected disabled>---请选择籍贯所在地---</option>
         <option value="bj">北京</option>
	 <option value="sh">上海</option>
	 <option value="gz">广州</option>
	 <option value="sz">深圳</option>
	 <option value="nj">南京</option>
      </select>
	<br />

注意：①、name属性设置提交到后台的key， option中的value值是提交到后台的value，比如选择北京，提交的数据为 birthplace="bj"

           ②、option元素中的 selected属性 表示默认选中，disabled 属性表示该选项不可选

2）复杂的下拉框

曾经去过地方：	<select name="visited" multiple="true"  style="width:80px;vertical-align:top">
			<optgroup label="江苏省">
				<option value="nanjing">南京</option>
				<option value="shuzhou">苏州</option>
				<option value="yangzhou">扬州</option>
				<option value="wuxi">无锡</option>
			</optgroup>
			<optgroup label="广东省">
				<option value="guangzhou">广州</option>
				<option value="shenzhen">深圳</option>
				<option value="shantou">汕头</option>
				<option value="zhanjiang">湛江</option>
			</optgroup>
			<optgroup label="海南省">
				<option value="haikou">海口</option>
				<option value="sanya">三亚</option>
				<option value="wanning">万宁</option>
				<option value="wenchang">文昌</option>
			</optgroup>
		</select>									

注意：①、select 元素中 multiple="true" 表示下拉框可以多选

           ②、optgroup  元素设置下拉框分组

---

三、textarea元素（多行文本框）

自我介绍：<textarea name="selfIntroduction" rows="10" cols="30" style="vertical-align:top;resize:none;">
					
</textarea>

注意：①、rows属性设置有文本框有多少行，cols属性设置有多少列

           ②、style="vertical-align:top" 设置左边的提示文字在左上方（提示文字默认在多行文本框的左下方），resize:none 禁止拉伸textarea的大小

---

四、input元素 type="file"(文件上传)

上传头像：<input type="file" name="headpic" />

---

五、按钮

1）button 元素

<button onclick="alert('ok')">点击我</button>  <br/>

注意：①、常用属性 onclick，用于定义点击时执行的函数

           ②、button 元素通常用于非表单内的按钮

2）<input type="button" />

邮箱地址：<input type="text" name="email" /> <input type="button" onclick="checkEmail();" value="验证邮箱" />

 注意：该按钮通常用于表单内部的点击

3）将 a 元素做成按钮

注意：通常都是修改a 元素的样式来完成，主要步骤有 将 a 元素的display设置成block，然后设置width,height,backgroup, 最后设置href属性成点击的函数

4）提交按钮、重置按钮

<input type="submit" value="提交"/><input type="reset" value="重置" />

注意：通常不用 input type="submit"的提交按钮来提交数据， 原因：无论是否有设置数据校验函数，数据都会提交

---

六、form元素 （表单提交）

<form action="addUser.do" method="POST" enctype="multipart/form-data">
</form>

注意：①、action属性指定表单提交的地址（即数据提交到哪）

           ②、method属性指定表单提交的方式，常用值为 GET 或 POST

           ③、enctype属性指定表单提交时的编码方式，可以填写的值分别为 

                  application/x-www-form-urlencoded 

                              默认值，此编码无法用于将文件上传到服务器

                  multipart/form-data

                              此编码用于将文件上传到服务器

                   text/plain

                              此编码因浏览器而异