4.表单和框架

東
194 阅读4分钟

1. form表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<form  action=""  method=""  enctype=""   name="" >
  表单元素
  ……
</form>

action：属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL
method：属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.
enctype：属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：

  • application/x-www-form-urlencoded（默认的设置，没有文件上传可以不加）

  • multipart/form-data (有文件上传)

2. 表单的作用

搜集不同类型的用户输入信息

表单是由网页上可以提供用户输入和选择的⼀些控件（表单元素）组成的

3.1 单行文本框

属性：type="text"

<input  type="text"   name=""  size=""   maxlength="" placeholder='' value="" />
<!--
type：值为text为单行文本框
size: 文本框的长度
maxlength：文本框可以输入内容的最大长度
placeholder：占位符
value：输入的内文本
name：自定义名称
-->

3.2 密码框

属性：type="password"

<input  type="password"   name=""  size=""   maxlength=""  value="" />

多行文本框

<textarea  name=""   cols=""    rows=""  ></textarea>

注意：默认点击边框有一个蓝色的边框 input:focus{ outline: 0;}

3.3 单选框

属性：type="radio"

<input type="radio"  name=""  value=""  checked="checked" />
<!--
type：radio表示单选框
checked：默认选中
-->

注意：单选框name值相同则为同一按钮组；

单选框中被提交的值是value中的值

3.4 label

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
</form>

for属性 ： 规定 label 绑定到哪个表单元素
< label >  标签的 for 属性应当与相关元素的 id 属性相同

3.5 复选框

属性：type="checkbox"

<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球">

注意：复选框name值必须为同名数组则为同一按钮组

3.6 下拉菜单

<!-- 单选下拉菜单 -->
<select name=""   size=""  >
	<optgroup label=分组名称>
		  <option value= " "   selected=selected></option>
        ……
    </optgroup>
 </select>
<!-- 多选下拉菜单 -->
<select name=""   size=""  multiple= "multiple" >
	<optgroup label=分组名称>
		  <option value=""   selected=selected></option>
        ……
    </optgroup>
 </select>

size：下拉菜单的高度

multiple：多重的，多个的

3.7 浏览框

<input  type="file"   name=""  accept="" />

accept：限制文件上传格式

accept=".csv" 上传.csv格式

accept="application/vnd.ms-excel"   上传.xls格式
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 上传.xslx格式

accept="text/plain"  上传.png/.jpg/etc格式

accept="image/*"  上传图片格式

accept="text/html"   上传.htm,.html格式

accept="video/*"   上传video(.avi, .mpg, .mpeg, .mp4)格式

accept="audio/*"  上传audio(.mp3, .wav, etc)格式

accept=".pdf"  上传.pdf格式

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"   如果限制两种文件格式，同时限制

注意：表单提交方式必须为post
form必须设置属性enctype="multipart/form-data"

3.8 隐藏域

<input  type= " hidden"   name=""   value="" />

注意：隐藏域不会在页面的显示
隐藏域的值仍会被提交到服务器

3.9 按钮

按钮有三种：普通、提交、重置

  • 普通 type="button" 配合js完成⼀些操作

  • 重置 type="reset" 重置表单数据 有默认的按钮标题。

  • 提交 type="submit" 提交表单

提交按钮

<input  type= "submit"   name=""   value=""/>

重置按钮

<input  type= "reset"   name=""   value=""/>

普通按钮

<input  type= "button"   name=""   value=""/>

图片按钮

<input  type= "image"  src=""  name=""   value=""/>

3.10 readonly和disable属性

readonly

readonly 属性规定输入字段为只读,但其value值仍会被表单提交
readonly属性只针对text、password和textarea有效

disabled

disabled属性规定禁用该表单元素，其value值不会被表单提交
disabled属性对所有表单元素均有效，包括select, radio, checkbox, button等
使用disabled属性后表单元素背景会变成灰色

表单属性总结

4. frameset框架集

<frameset  rows| cols="10%,*，20%" >
     <frame  name="" src=""  noresize="noresize"  scrolling="yes/no/auto" />
     <frame  name="" src="" >
</frameset>

frameset属性

  • rows   行数
  • cols    列数
  • frameborder   0/1  规定是否显示框架边框
  • border                设置边框粗细

frame属性

  • noresize        规定无法调整框架的大小
  • scrolling        yes/no/auto   规定框架是否出现滚动条

注：不能将  标签与 标签嵌套使用

4.1 frameset跳转

跳转到frame指定板块

给对应的frame定义name名字
< frame   name="right"   src="left.html"/ >
修改跳转方式
< a href="one.html"  target="right">第一页

noframes
<frameset cols = "25%,*"> 
	<noframes> 
		<body>
			你的浏览器不支持框架
		</body> 
	</noframes> 
	<frame src ="" /> 
	<frame src ="" /> 
</frameset>

noframes 元素可为那些不支持框架的浏览器显示文本
必须把其中的文本包装在  标签中
在XHTML 1.0 Strict DTD 中， 标签是不被允许

5. iframe内连框架

<iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>

name:规定 iframe 的名称
src:规定在 iframe 中显示的文档的 URL
width:规定 iframe 的宽度
height:规定 iframe 的高度
scrolling:规定是否在 iframe 中显示滚动条

5.1 iframe跳转
<iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>

<a href="http://www.baidu.com" target='_top|_parent'>百度</a>

预习单词

css  Cascading Style Sheets,即层叠样式表
property 财产
selector  选择器
红red   绿green  蓝blue  粉色pink  紫色purple
inch  英寸
point  点
centimeter  厘米
millimeter  毫米
pixel   像素
import   进口

relationship  关系
text-indent  文本缩进
font-size  字体大小
visited  参观，访问
hover  悬停
active   积极地
first-letter  第一个字母
first-line  第一行
before  之前
after  之后
important  重要的

avatar
文章
阅读
粉丝