HTML网页编程(3)

原创 2016年08月28日 21:12:57


表 单 <form> 1


表单标签是最常用的标签,用于与服务器端的交互。

 
☆<input>:输入标签

接收用户输入信息。其中的type属性指定输入标签的类型。

      文本框 text。输入的文本信息直接显示在框中。
      密码框 password。输入的文本以原点或者星号的形式显示。
      单选框 radio 如:性别选择。
      复选框 checkbox 如:兴趣选择。
      隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。
      提交按钮 submit 用于提交表单中的内容。
      重置按钮 reset 将表单中填写的内容设置为初始值。
      按钮 button 可以为其自定义事件。
      文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
      图像 image 它可以替代submit按钮。

☆ <select>:选择标签

<span style="font-family:Times New Roman;font-size:14px;"><select name="lang">
     <option value="none"> --请选择语言--</option>
     <option value="java" selected="selected"> JAVA </option>
     <option value="c"> C语言 </option>
</select></span>
☆ <textarea>:多行文本框

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body >
	
		<form>
		       姓名:<input type="text" name="name" value="请输入姓名..."/><br/>
		       密码:<input type="password" name="password" value=""/><br/>
		       性别:<input type="radio" name="sex" checked="checked" value="male" />男  
		       <input type="radio" name="sex"  value="female"/>女  
               <input type="radio" name="sex"  value="other"/>其他
           <br/>
                        技术:
              <input type="checkbox" name="tech" value="Java"/> JAVA
              <input type="checkbox" name="tech" value="html" />HTML
              <input type="checkbox" name="tech" value="data" />数据库
              <input type="checkbox" name="tech" value="cow" />吹牛 <br/>
           <input type="hidden" value="hncu">
           <input type="button" value="别点我" onclick="alert('no no no...');"/><br/>
                       附件:<input type="file" name="attach_file" /> <br/> 
           
                       语言:
           <select name="lang">
              <option value="none">--请选择语言--</option>
              <option value="Java">Java</option>
              <option value="C"> C语言</option>
              <option value="C++">C++</option>
              <option value="C#">C#</option>
           </select>
           <br/>
           
                         简介:<br/>
            <textarea rows="10" cols="20" name="introduce">要求:字数不少于200!
            </textarea>
           
           <br/>
           <input type="image" src="btn.png" width="100" height="70" onclick="alert('11111...');"/>
           <input type="image" src="btn2.jpg" /><br/>
           
           <input type="submit" value="注册"/>
           <input type="reset" value="清空"/>
		</form>
	
	</body>
</html></span>

☆ 表单组件格式化

      用表格标签<table>对表单中的组件进行格式化。

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body text="#0000ff">
	
		<form action="后台处理表单的地址" method="post">
		<table  cellspacing="3">
		  <tr>
		     <th colspan="2">注册表单</th>
		  </tr>
		  <tr>
		        <td>姓名:</td>  <td><input type="text" name="name" value=""/> </td>
		  </tr>
		  <tr>
		       <td>密码:</td>  <td><input type="password" name="password" value=""/></td>
		  </tr>
		  <tr>
		       <td>性别:</td>
               <td>
	               <input type="radio" name="sex" checked="checked" value="male" />男  
			       <input type="radio" name="sex"  value="female"/>女  
	               <input type="radio" name="sex"  value="other"/>其他
	           </td>
           </tr>
           <tr>
             <td>技术:</td>
             <td>
              <input type="checkbox" name="tech" value="Java"/> JAVA
              <input type="checkbox" name="tech" value="html" />HTML
              <input type="checkbox" name="tech" value="data" />数据库
              <input type="checkbox" name="tech" value="cow" />吹牛 
             </td>
           </tr>
           <tr>
           	<td>附件:</td> <td><input type="file" name="attach_file" /> </td> 
           </tr>
           <tr>
               <td>语言:</td>
               <td>
		           <select name="lang">
		              <option value="none">--请选择语言--</option>
		              <option value="Java">Java</option>
		              <option value="C"> C语言</option>
		              <option value="C++">C++</option>
		              <option value="C#">C#</option>
		           </select>
           		</td>
           </tr>
           <tr>
	            <td valign="top">简介:</td>
	            <td>
		            <textarea rows="10" cols="20" name="introduce">要求:字数不少于200!
		            </textarea>
		        </td>
           </tr>
           <tr>
              <td colspan="2" align="center"> 
                   <input type="submit" value="注册"/>  
                   <input type="reset" value="清空"/>    
             </td>
           </tr>
         </table>
		</form>
	</body>
</html></span>


☆表单提交的页面实现

   1)先定义form表单中的action属性值,指定表单数据提交的目的地(服务端)。
   2)明确提交方式,通过指定method属性值。如果不定义,那么method的值默认是get。


                                        表单提交方式(get/post)

☆两种方式的区别

   1) get提交将数据显示在地址栏,对于敏感信息不安全。post提交不显示在地址栏,对于敏感信息安全
   2) 地址栏中存放的数据是有限,所以get方式对提交的数据体积有限制。而post可以提交大体积数据。
   3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  
  <body>
    <h2>用户登录</h2>
    <form action="LoginServlet" method="post">
             姓名:<input type="text" name="name"/><br/>
            密码:<input type="password" name="pwd"/><br/>
        <input type="submit" value="登录">
    </form>
    页面中的其它信息<br/>
    <a href="LoginServlet" >查看结果信息   </a>
    
  </body>
</html></span>


☆表单提交方式与乱码问题

       无论是get还是post方式,对于Tomcat服务器端,默认的解码方式是ISO8859-1,因此中文会出现乱码。解决:通过用ISO8859-1进行编码,再用相应的中文码表进行解码即可。
   如果是post提交,可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题,该方法只对数据体有效即该方法只设置数据体的编码方式。因此,通常表单使用post提交,因为这样编码更方便。

浏览器与服务端的交互方式
<span style="font-family:Times New Roman;font-size:14px;">package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("Get过来了......");
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//解决乱码---注意,表单一定要采用post方式提交

        response.setContentType("text/html;charset=utf-8");//告诉浏览器,打开我这次输出页面时采用什么编码
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		String name=request.getParameter("name");
//		String name = request.getParameter("name");
//		byte bs[] = name.getBytes("iso8859-1");
//		name = new String(bs,"utf-8");
		String pwd=request.getParameter("pwd");
//		String pwd = request.getParameter("pwd");
		out.println("欢迎你:"+name);
		out.println("你密码是:"+pwd);
		
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

}</span>


☆客户端(浏览器)与服务端交互的三种方式:

    1) 地址栏中输入url地址 —— get方式
  2) 超连接 —— get方式
  3) 表单—— get和post方式


☆客户端与服务器的数据校验问题

    1) 客户端进行了增强型的校验,服务器是否还要校验?

  2) 服务器端进行了增强型的校验,客户端是否还要校验?

                                             头标签 <head>

头标签都放在<head></head>头部分之间。
包括:title  base  meta  link


☆ <title>

☆ <base>


    href 属性:指定网页中所有的超链接的目录。target 属性:指定打开超链接的方式,如_blank 表示所有的超链接都用新窗口打开显示。

☆ <meta>

    name 属性:网页的描述信息。当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索。
  http-equiv 属性:模拟HTTP协议的响应消息头。


☆<link>

    rel 属性:描述目标文档与当前文档的关系。type 属性:文档类型。media:指定目标文档在哪种设备上起作用。
                                               其它标签

☆<marquee>
    direction 属性:left  right  down  up
   behavior 属性:scroll  alternate  slide

☆<pre>

    可以将文本内容按在代码区的样子显示在页面上。

☆几个纯数据封装标签

    div标签  span标签   p标签

☆标签分为两大类

   1) 块级标签(元素):标签结束后都有换行。 div p dl ol ul table title
   2) 行内标签(元素):标签结束后没有换行。 font span img input select a


☆XHTML 与 XML,HTML5

                                                        lable标签:给元素定义快捷键

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 让页面3秒后自动跳转到sina网站
		  <meta http-equiv="refresh" content="3;url=http://www.sina.com">
		 -->
		<META Name="keywords" Content="湖南 城市 学院" />
		
		<title>这是标题</title>
		<!-- 下面这句是把当前目录设成: ../day3/
		  <base href="../day3/">
		 -->
		 <base target="_blank">
		 
		 <link rel="stylesheet" type="text/css"
		    href="table.css" media="screen,print" >
	</head>
	
	<body >
	    <marquee behavior="scroll" scrollamount="10" width="200" height="100" scrolldelay="3">
	      <img alt="图片文字描述1" src="../imgs/1.jpg">
	      <img alt="图片文字描述2" src="../imgs/2.jpg">
	      <img alt="图片文字描述3" src="../imgs/3.jpg">
	      <img alt="图片文字描述4" src="../imgs/4.jpg">
	    </marquee>
	    <a href="../day3/form2.html">查看另一个网页</a>
	    
	    <hr/>
	    <table  cellspacing="3">
		  <tr>
		     <th colspan="2">注册表单</th>
		  </tr>
		  <tr>
		        <td>姓名:</td>  <td><input type="text" name="name" value="" id="user"/> </td>
		  </tr>
		  <tr>
		       <td>密码:</td>  <td><input type="password" name="password" value=""/></td>
		  </tr>
		  <tr>
		       <td>性别:</td>
               <td>
	               <input type="radio" name="sex" checked="checked" value="male" />男  
			       <input type="radio" name="sex"  value="female"/>女  
	               <input type="radio" name="sex"  value="other"/>其他
	           </td>
           </tr>
           <tr>
             <td>技术:</td>
             <td>
              <input type="checkbox" name="tech" value="Java"/> JAVA
              <input type="checkbox" name="tech" value="html" />HTML
              <input type="checkbox" name="tech" value="data" />数据库
              <input type="checkbox" name="tech" value="cow" />吹牛 
             </td>
           </tr>
           <tr>
           	<td>附件:</td> <td><input type="file" name="attach_file" /> </td> 
           </tr>
           <tr>
               <td>语言:</td>
               <td>
		           <select name="lang">
		              <option value="none">--请选择语言--</option>
		              <option value="Java">Java</option>
		              <option value="C"> C语言</option>
		              <option value="C++">C++</option>
		              <option value="C#">C#</option>
		           </select>
           		</td>
           </tr>
           <tr>
	            <td valign="top">简介:</td>
	            <td>
		            <textarea rows="10" cols="20" name="introduce">要求:字数不少于200!
		            </textarea>
		        </td>
           </tr>
           <tr>
              <td colspan="2" align="center"> 
                   <input type="submit" value="注册"/>  
                   <input type="reset" value="清空"/>    
             </td>
           </tr>
         </table>
	    <hr/>
	    
	    <pre>
			class Hello{
			   public static void main(String args[]){
			      System.out.println("Hello!");
			   }
			}
	    </pre>
	    
	    <!-- 数据封装标签 -->
	   1111<div id="d1">dsjksddskjsjdkjs</div>2222<br/>
	   
	1111<span>dsjksdskjsjdkjs</span>2222
	<p>
	    我校就读梓山湖学校子弟统计工作暑假前已经完成,学校关工委于7月8日同梓山湖学校取得联系并呈交报名汇总表。梓山湖学校于7月26日开始报名,请持下列材料的原件和复印件自己前往梓山湖学校作好报名工作(8月31日前未满6岁的不接受报名)。<br/>
	1.家庭户口本和父母或法定监护人身份证;
	2.父母<span>双方</span>或法定监护人在益的有效暂住证和房产证或房屋租赁合同。 
	附件:报名汇总表
	</p>   
	定监护人在益的有效暂住证和房产    
	
	<label for="user" accesskey="u">用户名(u)</label>
	    <br/><br/><br/><br>
	    
	</body>
</html></span>





 

















版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Html5网页录音,js录音mp3

Html5网页录音,js录音mp3

html5css3做的简单网页

  • 2014年05月14日 09:58
  • 4.08MB
  • 下载

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

本文为HTML5&CSS3初学者指南系列的第二篇文章,介绍CSS3的基本知识。

制作一张简单的网页(HTML+CSS+JS) 【3】

前面两篇文章写了HTML和CSS,接下来这篇我把我学到的JavaScript,做一下简单的总结。如果我把一张网页比作是一幢大楼,那么HTML就是大楼的根基和基本骨架,CSS就是使大楼宏伟的一些装饰物,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML网页编程(3)
举报原因:
原因补充:

(最多只允许输入30个字)