表单Form以及表单元素，框架集（了解）及iframe(重点)

HTML 课程Day3

课程大纲

 

Ø 表单Form以及表单元素

Ø 框架集（了解）及iframe(重点)

本课程视频连接：http://edu.51cto.com/course/15538.html

1、表单标签Form

1. 什么是表单

表单在网页中负责数据采集功能的。表单是有3部分组成：

（1）表单标签 <form></form>

（2）表单域

（3）表单按钮

 

 

2. Form标签、

语法格式：

<form action=”url”  method=”get|post”>

</form>

练习：

<form action="welcome.html" method="post">

<p>

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

</p>

<p>

</p>

<input type="submit" value="登陆"/>

</form>

 

属性名	值	说明
action	URL	提交的表单向何处发送数据
enctype	Multipart/form-data	上传文件时使用
method	Get post	规定提交方法
target	_blank _self _parent _top framename	在何处打开URL
Autocomplete	On off	规定表单是否启用自动完成功能
Novalidate	Novalidate	设置表单提交不验证

 

 

3. 表单元素

3.1输入框input(重点中的重点)

<input/> 用于搜集用户信息。

根据type属性，决定输入字段的形式（文本框，复选框、掩码文本框、单选按钮、按钮等等）

input标签

         属性值                 描述

         text         普通文本框

         password     掩码文本框

         submit       提交按钮

         button       普通按钮

         reset        重置按钮

         radio        单选按钮，一组单选按钮必须是定义相同的name值

         checkbox     复选按钮，一次能够选择多个，一组复选按钮必须是定义相同的name值，方便取值

         file         文件上传文本框

         hidden       隐藏域，会被提交

 

image        图片按钮，需配合src属性使用

         color        颜色按钮

         date         日期字段，带有calender控件

         datetime

         datetime-local  日期字段，time字段，带有calender控件

         week            周，带有calender控件

         time            时、分、秒 带有time控件

         email            邮件地址

         number           数字输入文本框

         range            s数字输入文本框，范围

         tel              电话号码文本框

         url              url文本框

 

 

<p><input type="text" name="" id="" value="" /></p>

<p><input type="password" name="" id="" value="" /></p>

<p>

提交按钮 <input type="submit" name="" id="" value="登陆" />

</p>

<p>

普通按钮<input type="button" name="" id="" value="保存" />

</p>

 

 

其余属性：

Placeholder ：定义文本框提示性的文字

Maxlength ： 设置文本框最多输入的字符数

Readonly：只读属性

Disabled：禁用属性，文本框，按钮，复选框等

Checked：设置默认选中项，只适用于单选按钮或复选按钮

 

 

3.2 select下拉列表标签

用法：

<!--

        autofocus:自动获取焦点

        multiple：能够设置选中多个项

        size：设置可见选项数目

        -->

<select name="" autofocus="autofocus" size="2">

<option value="0">--请选择省份--</option>

<option value="1" >北京</option>

<option value="2">上海</option>

<option value="3">深圳</option>

<option value="3">四川</option>

</select>

何时使用select标签？

 通常当选项特别多时，checkbox再也不适用，能够使用下列表

好比：学历、省份、职位等

option标签中能够经过设置selected=selected设置默认选项

 

 

3.3 多行文本域控件textarea

      <textarea name="leavewords" rows="10" cols="40">你好，我是某某</textarea>

 

 

3.4 label标签

<label>标签通常和input标签关联使用

label标签的两种用法：

（1）<label><input type="checkbox" name="fruit" id="" value="0" /> 苹果</label>

 

（2）<input type="checkbox" name="fruit" id="xigua" value="1" />

<label for="xigua">西瓜</label>

 

 

 

 

3.5 button标签

定义一个按钮标签，<button>文本或图像</button>

对应低版本的IE浏览器，button标签，默认是普通的button按钮，而其余的浏览器默认为submit类型

<form action="" method="post">  

<button>提交</button>

</form>

 

 

2、框架（了解）

知识内容：

活动框架 iframe

框架集   frameset

1. 活动框架iframe,这个框架能够内联或包含另一个网页文档

语法结构：<iframe></iframe>

 

实例：

<table border="1" width="100%"  cellspacing="0" cellpadding="0">

<tr height="100"><td colspan="2">高新区软件园C区食堂管理系统</td></tr>

<tr height="600">

<td width="15%">

<ul>

<li><a href="usermanger/uadd.html"  target="mainbox">员工添加</a></li>

<li><a href="usermanger/uedit.html" target="mainbox">员工修改</a></li>

<li><a href="usermanger/ulist.html" target="mainbox">员工查询</a></li>

</ul>

</td>

<td width="90%">

<iframe src="usermanger/welceome.html" name="mainbox" width="100%" height="600">  

                     你的浏览器不支持，请升级或更新浏览器    

</iframe>

</td>

</tr>

</table>

经常使用属性：

frameborder:是否显示框架的边框  0：不显示，1：显示

Scrolling:是否显示滚动条

Yes：显示

No:不显示

Auto:自动处理

 

 

2. 框架集   frameset

<frameset  ></frameset>

属性rows表示分红几行，通常用“，”隔开。

属性cols表示分红几列，通常用“，”隔开。

 

使用fameset标签，再也不须要body元素

  

主框架页面：

 

<frameset rows="15%,85%">

      <frame src="usermanger/top.html" />

      <frameset cols="200,*">

       <frame src="usermanger/navlist.html" />

       <frame src="usermanger/welceome.html"  name="mainbox" />

      </frameset>

     

     </frameset>

 

navlist.html页面：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<ul>

<li><a href="uadd.html"  target="mainbox">员工添加</a></li>

<li><a href="uedit.html"  target="mainbox">员工修改</a></li>

<li><a href="ulist.html"   target="mainbox">员工查询</a></li>

</ul>

</body>

</html>