html的表单标签和框架标签

表单标签

框架标签

其他标签

表单标签

表单是html中重要的一部分

<form></form>表单标签,用于搜集不同类型的用户输入,比如注册信息,购物信息等

name:表单的名称
action:提交的路径地址,action 该属性定义在提交表单时执行的动作提交给服务器
method:规定在提交表单时所用的 HTTP 方法,值为get,post,put,delete,常用的为get和post,get提交数据的方式相对不安全,提交的数据大小有限制,根据浏览器的差异而有所不同.post提交数据的方式相对安全,提交的数据大小也没有限制

<input/>单个使用,输入框,是最重要的表单元素,有很多形态，根据 type 属性的值的不同来设置不同形态,但各种形态都应该设置name属性,因为name表示字段,服务器获取表单数据后,解析数据时,需要用name来区分不同字段

type:设置input标签的形态,值有如下几个
text:用于文本输入的单行输入字段
name:要定义的字段,
value:可设置的默认值,可不设置此属性
password:密码输入框,设置成此格式,会显示成掩码即小黑点
name:定义的字段,要跟后台对应,
radio:单选按钮,在多个选项中只能选择一个
name :定义的字段,跟后台对应,
value:单选框需要设置自定义value值
checked,表示默认被选中,在需要设置默认被选中的条目上使用该属性,值为checked
checkbox:复选框,可以在多个选项中选择多个
name:定义的字段,跟后台对应
value:需要设置的自定义的值
file上传文件的小控件
name:定义的字段,跟后台对应
submit:提交按钮
value:显示的对应按钮的字
button:按钮,点击按钮触发一些事件
value:显示在对应按钮的字
image:图片按钮,点击按钮触发一些事件
src:图片路径
alt:图片的说明
reset 重置，点击会清空之前填写的内容
value显示在重置按钮上的字
hidden:隐藏域,不需要用户看到,但是服务器需要的数据,用隐藏域这种方式

<select></select> 下拉列表

name:定义的字段,跟后台对应
value:设置不同的自定义的值
selected:表示默认的选中的,在需要设置默认被选中的条目上使用该属性,值为selected

<option></option>可选项,下拉菜单可以级联

value:表单项的值
selected:默认被选中

<textarea></textarea>:文本输入框,可以用来写备注,默认的textarea大小可以调整,可以通过下面两个属性设置默认大小,textarea包裹的文字默认用来填充文本输入框,可被修改

name:定义的字段,跟后台对应,
cols:设置列数
rows:设置行数

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="#">
    <table>
    		<!-- 单行文本输入框 -->
    <tr>
      <td> 请输入用户名</td>
      <td>
      <input type="text"  name="userName" value="张三"/>
    </tr>
    		<!-- 密码框 -->
    <tr>
      <td> 请输入密码</td>
      <td>
      <input type="password"  name="password" value=""/>
    </tr>
               <!-- 复选框 -->
    <tr>
      <td> 请选择爱好</td>
      <td>
      <input type="checkbox"  name="preference" value="book"/>看书
      <input type="checkbox"  name="preference" value="tv"/>看电视
      <input type="checkbox"  name="preference" value="movie"/>看电影
    </tr>
               <!-- 单选按钮 -->
    <tr>
      <td> 请选择您的学历</td>
      <td>
      <input type="radio"  name="school" value="primier"  checked="checked"/>小学
      <input type="radio"  name="school" value="high"/>中学
      <input type="radio"  name="preference" value="university"/ >大学
    </tr>
              <!-- 文件上传控件 -->
    <tr>
      <td> 请上传您的文档</td>
      <td>
      <input type="file"  name="file"  >
    </tr>
   			<!-- 下拉列表 -->
    <tr>
      <td> 请选择您的籍贯</td>
      <td>
      <select name="province">
      <option value="hb">河北</option>
	       
      <option value="hn" selected="selected">河南</option>
      <option value="sd">山东</option>
      </select>
    </tr>
             <!-- 多行文本输入框 -->
      <tr>
      <td>备注</td> 
      <td>
      <textarea rows="3" cols="10">我是个好人</textarea>
      </td>
      </tr>
      
      <tr>
      <td>备注2</td> 
      <td>
      <textarea >我是个好人</textarea>
      </td>
      </tr>
    	     <!-- 提交按钮 -->
     <tr>
      <td>
      <input type="submit" value="提交">
      </td> 
      <td>
      <input type="button" value="提交">
      </td>
     </tr>	
                <!-- 复位按钮和以图片作为按钮 -->
      <tr>
       <td>
       <input type="reset" value="重置">
       </td>
       <td>
       <input type="image" src="images/01.png" alt="图片">
       </td>
      </tr>   
      				<!-- 隐藏域,服务器需要,但是不要用户看见-->    
      <tr>
       <td>
       <input type="hidden" name="hide" value="helloworld">
       </td>
      </tr>
      
    </table>
    </form>
</body>
</html>

框架标签

日常浏览中,咱们看到的网页是长这个样子的:(以百度的某个页面为例)

这种页面是通过将多个子页面通过框架标签,结合在一起

下面看框架标签需要注意的是<frameset></frameset>和<body></body>不能同时使用

<frameset></frameset>框架标签,对网页的格式进行分块,进行对多个网页的简单排版

rows:按行划分,如果对三行划分,格式可以为"120,80,*" ,*代表剩余部分,也可以按百分比划分,比如值为"25%,50%,25%"
cols：按列划分,如果对三行划分,格式也可以用"20%,30%,*",*代表剩余部分

<frame/>单个即可,代表页面

src:页面地址
name:设置name的作用在于,我在某个页面上设置链接的时候,可以指定在这个框架中的哪一个子页面进行跳转,如果找不到指定的子页面,则会在整个大的页面上跳转

示例:先看总的框架标签代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

	<frameset rows="200,*">
	  <frame name="top" src="表格标签.html">
	  <frameset cols="160,*">
	  	<frame  name="left" src="链接标签.html">
	  	 <frameset rows="80,80">
	  	   <frame  name="secondtop" src="块标签.html"/>
	  	   <frame  name="button" src="清单标签.html"/> 
	  	 </frameset>
	  </frameset>
	
	</frameset>

</html>

再看清单标签代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul type="square">
	<li>helloworld</li>
	<li>helloworld</li>
	<li>helloworld</li>
	<li>helloworld</li>
	</ul>
	<ol type="A" start="3">
	<li> worldhello</li>
	<li> worldhello</li>
	<li> worldhello</li>
	<li> worldhello</li>
	<a target="top" href="menu1.html"  > menu1</a>
	<a target="left" href="menu2.html"  > menu2</a>
	<a target="secondtop" href="menu13.html"  > menu1</a>
	
	
	</ol>
</body>
</html>

其他三个标签的代码在上篇博客中,没改动,看下效果:

当点击右下角的按钮时,因为清单标签中的menu链接的target值,指向其他三个frame的name,所以会在相对应的frame子页面上跳转,如果target的值在整个页面所有frame上找不到,会在整个页面跳转

其他标签

<meta >

<link> 引入外部的css文件

<script> 引入外部的javascript文件

特殊字符:

  空格

> 大于号

< 小于号

版权符号

® 注册符号

原文:http://www.monkey1024.com/html/741