Html-4.结构标记和表单<form/>

1.结构标记

head     头部
nav      导航
section   内容
article    内容
footer    底部
aside    定义一些额外组成部分--如：广告栏、侧边栏和相关引用信息

2.表单

提交信息到服务器

• 两个基本部分

实现数据交换的可见界面元素
比如文本框或按钮，提交后的表单出来

界面元素

• 用<form>元素

<form action="demo-form.php" mehtod=“get”>
First name: <input type="text" name="FirstName" value="Mickey" size="40"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

type:类型 text password radio file checkbox hidden ···
radio：必备属性：name 组名（一组单选框name必须相同）value 选项值 checked默认选中

checkbox：

file：

hidden:隐藏域，提交用户看不见的字段

name：请求的地址的name,提交用的
value：默认的值，相当hint
size:宽度
maxlength:最大的字符数
disabled：禁用，文本框、按钮变灰，不可输入
readonly：只能看，不能写了

 required：必须填写（不兼容低版本ie h5的属性）

3.select的属性 下拉列表

name ； size 菜单的行数，默认1行

multiple：允许多选。使用于多行菜单

selected：加在option上，默认选中

4.控件分组标记

  <fieldset>

<legend>组名</legend>

</fieldset>

<form>
					<table width="500px"height="200px" border="1px" cellspacing="0">
						<tr>
							<td>姓名</td>
							<td>
								<input type="text" name="name" value="姓名" />
							</td>
						</tr>
							<tr>
							<td>性别</td>
							<td>
								<input type="radio" name="sex" value="man">
									男
								</input>
								<input type="radio" name="sex" value="woman">
									女
								</input>
							</td>
						</tr>
							<tr>
							<td>爱好</td>
							<!--music=on&game=on-->
							<td>
								<input type="checkbox" name="music"/>music
								<input type="checkbox" name="game"/>game
								<input type="checkbox" name="travle"/>travle
								<input type="checkbox" name="spot"/>spot
								<input type="checkbox" name="basketball"/>basketball
							</td>
						</tr>
							<tr>
							<td>爱好</td>
							<!--like=music&like=game-->
							<td>
								<input type="checkbox" name="like" value="music" checked="checked"/>music
								<input type="checkbox" name="like" value="game"/>game
								<input type="checkbox" name="like" value="travle"/>travle
								<input type="checkbox" name="like" value="spot"/>spot
							</td>
						</tr>
							<tr>
							<td>学历</td>
							<td>
								<select name="xueli">
									<option value="other">其他</option>
									<option value="zhuanke">专科</option>
									<option value="benke" >本科</option>
									<option value="shoushi" selected="selected">硕士及以上</option>
								</select>
							</td>
						</tr>
							<tr>
							<td>意向城市</td>
							<!--select的属性
								name ； size 菜单的行数，默认1行
								multiple：允许多选。使用于多行菜单
								selected：加在option上，默认选中
							-->
							<td>
								<select name="city" size="5" multiple="multiple">
									<option selected="selected">北京</option>
									<option selected="selected">上海</option>
									<option>深圳2</option>
									<option>杭桌</option>
									<option>天津</option>
									<option>厦门</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>个人描述</td>
							<td>
								<textarea name="descrip" cols="40" rows="8">这个家伙很懒，什么也没留下</textarea>
							</td>
						</tr>
						<tr>
							<td>密
							<input type="file"/>选择文件</td>
							<!--lable和input绑定，点击文字也可以选中-->
							<td>
								<input type="checkbox"  id = "idinfo"name="info"/><label for="idinfo">不要公开个人信息</label>
							<!--hidden 用于用户看不见，又必须上传的-->
							<input type="hidden" name="hidden" value="看不见"/>看不见我
							</td>
						</tr>
							<tr>
							<td>提交</td>
							<td>
								<input type="submit" value="确定"></input>
								<input type="reset" value="重置"></input>
								<input type="button" value="按钮"></input>
								<button>按钮</button>
								<!--<input type="image" src="img/bg_guid_1.png" /><!--图片按钮，一般不用，都是用css做的-->-->
							
							</td>
						</tr>
					</table>
				</form>