HTML之表单

HTML之表单

单选按钮（radio）

name值相同的为一组 只能选择一个

value中需要提供好默认值

性别：<input type="radio"  name="sex" value="man" checked="checked" />男
	 <!-- 选中 checked的属性赋值 -->
	 <input type="radio"  name="sex" value="woman" />女<br/>

多选按钮（checkbox）

name:值相同的为一组 可选择多个

values:提供好默认值

checked=“checked”:设置打开页面时，是默认选中的状态（可设置多个）

电脑品牌：<input type="checkbox" name="comp1" value="1"/>DELL
							<input type="checkbox" name="comp1" value="2" checked="checked"/>联想
							<input type="checkbox" name="comp1" value="3"/>惠普
							<input type="checkbox" name="comp1" value="4"/>神州
							<input type="checkbox" name="comp1" value="5" checked="checked"/>外星人

下拉菜单（select）

option：下拉菜单的选项（可以写多个）

selected=“selected”：设置下拉菜单默认选中

name要放在select标签中。

value放在option标签中

城市：<select name="city">
					<option value ="1">北京市</option>
					<option value ="2">上海市</option>
					<option value ="3" selected="selected">深圳市</option>
					<option value ="4">广州市</option>
				</select>

select中其他属性

multiple：设置下拉菜单的选

size：设置显示内容多少

搜索框（search）

autocomplete=“on” ：设置保存历史

autofocus=“autofocus”：设置光标自动对焦

<input type="search" name="serch"  value="" autocomplete="on" autofocus="autofocus"/><br/>

可选输入框 可填写下拉菜单（datalist）

list=“id名”

value值直接填写要显示的内容

<input type="search" name="search1"list="search-data" />
<datalist id="search-data">
				<option value ="百度"></option>
				<option value ="谷歌"></option>
				<option value ="搜狗"></option>
			</datalist>

颜色（color）

<input type="color" name="" id="" value="" />

刻度盘（range）

min：最小刻度

max：最大刻度

<input type="range" name="" id="" value="" 
				min="0" max="10"
			/>

上传文件（file）

<input type="file" name="" id="" value="" /><br/>
			<input type="submit" value="提交" />

表单时间

type=“time”：小时 分钟

type=“date” ：年份 月 日

type=“datetime-local”：年份 月 日 当前时区下的 小时 分钟

type=“week”：年份 第几周

type=“month”： 年份 月份

			时间：<input type="time"  /><br/>
			日期1：<input type="date"  /><br/>
			日期2：<input type="datetime-local"  /><br/>
			周：<input type="week"  /><br/>
			月份：<input type="month"  /><br/>

表单中的数字邮箱

type=“tel”：可调出手机的数字键盘

type=“email”：用来输入邮箱（如果邮箱输入有误就会，提示）

type=“url”：网页地址（http://www.baidu.com）

​ accesskey=“键盘按键”:设置快捷键，可以快速跳转到输入框

type=“number”：填入数字

​ min：设置可填入数字的最小值

​ max：可填入数字的最大值

​ step：设置每次增长的长度

			phone：<input type="tel"/><br/>
			email：<input type="email"/><br/>
			URL：<input type="url" name="" id="" value="" accesskey="s"/><br/>
			Number:<input type="number" min="0" max="100" step="10"/>