表单、输入框

表单、输入框

form表单：<form action="… " method="get"></form>
action:单击表单内的确定按钮时，该表单提交到哪个地址
get在地址栏中需要带上参数名称和值所以不安全，post不用参数名称和值所以相对安全
method: 指定表单提交时发送何种类型的请求
type="color"的文本框：<input name="color" type="color"/>
type="date"的文本框： <input name="date" type="date"/>
type="time"的文本框： <input name="time" type="time"/>
type="datetime"的文本框： <input name="datetime" type="datetime"/>
type="datetime-local"的文本框：<input name="datetime-local" type="datetime-local"/>
type="month"的文本框： <input name="month" type="month"/>
type="week"的文本框： <input name="week" type="week"/>
type="email"的文本框： <input name="email" type="email"/>
type="tel"的文本框：<input name="tel" type="tel"/>
type="url"的文本框： <input name="url" type="utl"/>
type="number"的文本框： <input name="number" type="number"/>
type="range"的文本框： <input name="range" type="range"/>
type="search"的文本框：<input name="search" type="search"/>
<input value="提交" type="submit">

readonly设置只读文本
单行文本框：<input id="username" name="username" type="text"/>
不能编辑的文本框：<input id="username2" name="username2" type="text" readonly="readonly"/>
密码框：<input id="password" name="password" type="password"/>
隐藏域：<input id="hidden" name="hidden" type="hidden"/>
第一组单选框：
<input id="color" name="color" type="radio" value="red"/>
<input id="color2" name="color" type="radio" value="green"/>
<input id="color3" name="color" type="radio" value="blue"/>
第二组单选框：
<input id="gender" name="gender" type="radio" value="male"/>
<input id="gender2" name="gender" type="radio" value="female"/><br/>
两个复选框：
<input id="website" name="website" type="checkbox" value="leegang.org">
<input id="website2" name="website" type="checkbox" value="crazyit.org">
文件上传域：<input id="file" type="file"/><br/>
图像域：<input type="image" src="img/1.jpg" alt="疯狂java联盟"/>
四个按钮：
<input id="ok" name="ok" type="submit" value="提交"/>
<input id="dis" name="dis" type="submit" value="提交" disabled="disabled"/>
<input id="cancel" name="cancel" type="reset" value="重填"/>
<input id="no" name="no" type="button" value="无动作"/>

<form action="http://www.baidu.com" method="get">
	<label for="username">单行文本框：</label>
		<input id="username" name="username" type="text"/><br/>
		<label> 密码框：<input id="password" name="password" type="password"/>
		</label><br/>
		<input id="ok" type="submit" value="登录百度"/>
</form>

button生成按钮：
<form action="http://www.baidu.com" method="get">
	<button type="button"><b>提交</b></button><br/>
	<button type="submit"><img src="img/1.jpg" alt="crazyit.org"/>
	</button><br/>
</form>

select:元素用于创建列表框或下拉菜单，该元素必须和<option.../>元素结合使用
option:每一个option元素代表一个列表项和菜单项
multiple:设置该列表框和下拉框是否支持多选,size:显示该列表内可同时显示多个列表项
value:我们提交上去的值
optgroup:用于定义列表项和菜单组
<form action="http://www.baidu.com" method="get">
		下面是简单下拉菜单：<br/>
		<select id="skills" name="skills">
			<option value="java"> Java语言
			<option value="c">c语言</option>
			<option value="ruby">Ruby语言</option>
		</select><br/><br/><br/>
		下面是允许多选的列表框：<br/>
		<select id="books" name="books"
			multiple="multiple" size="4">
			<option value="java">疯狂java讲义</option>
			<option value="android">疯狂Android讲义</option>
			<option value="ee">轻量级javaEE企业应用实战</option>
		</select><br/>
		下面是允许多选的列表框：<br/>
		<select id="leegang" name="leegang"
			multiple="multiple" size="6">
			<optgroup label="疯狂java系列图书">
				<option value="java" label="aaaaa">疯狂java讲义</option>
				<option value="android">疯狂Android讲义</option>
				<option value="ee">轻量级javaEE企业应用实战</option>
			</optgroup>
			<optgroup label="其他图书">	
				<option value="struts">Struts 2.1权威指南</option>
				<option value="ror">RoR敏捷开发最佳实践</option>
			</optgroup>
		</select><br/>
		<button type="submit"><b>提交</b></button><br/>
		</form>	

textarea:元素生成多行文本域（宽度高度必填）
cols:指定文本域的宽度
rows:指定文本域的高度
<form action="http://www.baidu.com" method="get">
			简单多行文本域：<br/>
			<textarea cols="20" rows="2"></textarea><br/>
			只读的多行文本域：<br/>
			<textarea cols="28" rows="4" readonly="readonly">
疯狂java讲义
轻量级javaEE企业应用实战
			</textarea><br/>
			<button type="submit"><b>提交</b></button><br/>
		</form>