HTML网页编程（3）
来源：互联网 发布：sql复制数据库 编辑：程序博客网 时间：2024/05/16 02:05
表 单 <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> 0 0
- HTML网页编程（3）
- HTML网页编程（2）
- HTML学习---网页编程（一）
- HTML网页编程
- HTML---网页编程(1)
- HTML---网页编程(2)
- HTML---网页编程基础知识
- HTML网页编程
- 网页编程--HTML
- 网页编程--DOM+HTML
- HTML---网页编程(2)
- html网页编程初体验
- HTML（网页设计）必用的设计模式---------CSS网页编程
- HTML学习---网页编程（一）HTML基础概述。列表、文字等
- HTML---网页编程（二）HTML基本属性、图像、框架和浏览器与服务器交互方式
- day01—HTML网页编程基础
- 客户端网页编程01——HTML
- HTML==网页编程基础知识
- POJ 1062 Dijkstra
- 计算器代码（Java)
- 讯飞语音合成_3_java web实现
- 单源最短路径（Single Source Shortest Path）--《算法导论》
- inode理解
- HTML网页编程（3）
- linux shell 基础整理
- linux文件交集差集
- BZOJ 2251 [2010Beijing Wc]外星联络
- maven+springMVC+hibernate项目搭建（一基础环境配置）
- Static 以及内存分配 /java初学
- Java中Math类中支持的方法
- PHP项目实战-微信支付接口
- 如何在U盘上安装Ubuntu16.01
