HTML表单实例.ppt
合集下载
HTML制作表单ppt课件
name=“login”>
用户名：<input type ="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
action属性值：url地址
</form> Nhomakorabea相对或绝对路径
• 创建图像按钮
• <input type=“image” scr=“图像地址” name=“控
件名称”/>
▪ type属性：image ▪ name属性值：控件名称 ▪ src属性值：图像文件地址
代码 示例
22
<input>——隐藏控件
• 创建隐藏控件
• <input type=“hidden” name=“控件名”/>
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数
• value属性：文本框中默认值
代码 示例
15
<input>——密码框
• 创建一个密码文本框 • <input type="password" name="名称" size="NB"
maxlength="NB"/>
• type属性值：password • name属性值：控件名称 • size属性值：指定密码框大小 • maxlength属性值：允许输入最多字符 • 输入的文本显示为密码形式
HTML 表单ppt课件
label标签的for属性应当与相关元素的id属性相同labelforman男labelinputtyperadionamesexvalue男idman表单元素标记2021精选ppt145多行文本框textareaname多行文本框名称cols每行中的字符数rows显示的行数初始内容textarea表单元素标记2021精选ppt156列表框a菜单式selectname列表框名称optionselectedselected哪个为初始选择就添加selected语句只有一个value提交值列表1optionoptionvalue提交值列表2optionselect分组optgrouplabel分组名称optgroup表单元素标记2021精选ppt16例如
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
HTML表单实例.ppt
• 背景色彩和文字色彩 – <body bgcolor=# text=# link=# alink=# vlink=#> • bgcolor --- 背景色彩 • text --- 非可链接文字的色彩 • link --- 可链接文字的色彩 • alink --- 正被点击的可链接文字的色彩 • vlink --- 已经点击(访问)过的可链接文字的色彩 • #=rrggbb • 色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
HTML表单ppt课件
3、传送方法--method
method=post :表单数据是与URL分开发 送，用户端的计算机会通知服务器来读取数据。 优点：数据长度没有限制。 缺点：速度比get慢。
3、传送方法--method
举例： <HTML> <HEAD> <title>设定表单的处理程序</title> </HEAD> <BODY>这是一个没有控件的表单 <form action="mailto:sdkdlcl@" method=“post“> </form> </BODY> </HTML>
</select><br><br> 爱好： <input name="chk1" type="checkbox" value="1" >游泳 <input name="chk2" type="checkbox" value="2" checked>
跑步
<br><br> <input type=submit value=" 确 定"> </form> </BODY> </HTML>
......
</form> 说明：
“表单的处理程序“定义的是表单要提交的地 址，也就是表单中收集到的资料将要传递的程序地 址。
2、处理程序--action
举例： <HTML> <HEAD> <title>设定表单的处理程序</title> </HEAD> <BODY>这是一个没有控件的表单 <form action="mailto:sdkdlcl@"> </form> </BODY> </HTML> 说明：在这个实例中，只定义了表单提交的地址为一个邮件。
HTML语言之表单和框架标记精品PPT课件
表单
6.单选框 格式：<input type=" radio " name=" RadioButtonName " value=string checked="checked" /> 功能：定义一组单选框。在该组单选框中只能由一个被选中。 说明：type属性的属性值radio表明是单选框。name属性定义单选框的名 字。value属性定义单选框的值。checked属性表明该单选框被选中，若未选 中则省略该属性。 技术要点：在一组单选框中必须是name属性值相同value属性值不同。
… </select> 功能：定义一个下拉列表。 说明：name属性定义下拉列表的名字。size属性定义列表窗口中可见选 项的个数。<option>标记定义列表项，必须和<select>标记一起使用。
表单
例5-11 创建一个简单的表单
表单
例5-11 创建一个简单的表单
<!--文件名：example5-11.html--> <html > <head> <title>创建表单</title> </head> <body bgcolor="#ff9900" leftmargin="0" text="#000000v topmargin="30"> <form action="mailto:" method="post">
</tr> <tr>
<td width="26%"> <font size=2>姓名</font></td> <td width="74%"><font size=2>
Servlet处理HTML表单PPT课件
▪ (5) 解决中文乱码问题
▪
▪
源码见U. serLogin(V1.0)
12
HTML表单组件的综合示例
▪ 将要学习的内容: ▪ (1) HTML表单组件的综合应用 ▪ (2) Servlet处理具有多返回值的组件(多选按钮, checkbox等) ▪ String str[]=request.getParamterValues(“”); ▪ (3) 输入内容的过滤等
action=“/servlet/check”> ▪ </form> ▪ 文本框(text) ▪ <input type=“text” name=“userName” ▪ Size=“16” maxlength=“8” value=“oyhj”/>
.
3
Html表单
▪ 密码框(password) ▪ <input type=“password” name=“userpsw” ▪ Size=“16” maxlength=“8”/>
▪ pw.println(paraName+":<br>");
▪ String values[]=req.getParameterValues(paraName);
▪ for(int i=0;i<values.length;i++)
▪
pw.println(values[i]+"<br>");
▪}
.
23
▪ 得到组件的名称，这个组件可能有多个值， 再通过request.getParameterValues(组件 名称)，就能得到组件的值。
.
21
HTML-表单例子实例
<HEAD><TITLE>文本框练习</TITLE></HEAD><BODY><form action="" method="post">您的姓名: <input type=text name=username value="username" size="15" maxlength="15"><br>密码：<input type=password name=passwords value="password" size="15" maxlength="15"><br>留言：<textarea NAME="comments" ROWS="5" COLS="35"></textarea> </form></BODY></HTML><html><body><form>我喜欢自行车：<input type="checkbox" name="Bike"><br>我喜欢汽车：<input type="checkbox" name="Car"></form></body></html><body><form>男性：<input type="radio" checked="checked" name="Sex" value="male" /><br />女性：<input type="radio" name="Sex" value="female" /></form><p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。
大学课件-表单-HTML表单
HTML 表单用于搜集不同类型的用户输入<form> 元素HTML 表单用于收集用户输入。
<form> 元素定义HTML 表单：HTML 表单包含表单元素。
表单元素指的是不同类型的input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的type 属性。
文本输入<input type="text"> 定义用于文本输入的单行输入字段：名字：<input type="text" name="userName">输入类型：password<input type="password"> 定义密码字段：单选按钮输入<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一<input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女提交按钮<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的action 属性中指定：<input type="submit" value="提交">Action 属性action 属性定义在提交表单时执行的动作。
《HTML制作表格》课件
2023
REPORTING
THANKS
感谢观看
表格的间距和边距
单元格间距
设置单元格之间的间距，以像素为单 位。
行高和列宽
调整表格中行和列的高度和宽度，以 像素为单位。
单元格边距
设置单元格内部的边距，以像素为单 位。
表格的文字样式
字体类型
选择用于表格中文本的字 体类型。
字体大小
设置表格中文本的字体大 小，可以使用像素值或相 对单位。
字体颜色
设置表格中文本的颜色， 可以使用颜色名称、十六 进制或RGB值。
简洁明了、易于理解、符合网站主题风格 。
网站导航表格的HTML制作技巧
网站导航表格的动态效果
使用HTML的`<nav>`元素，结合CSS样式 进行布局和美化。
通过JavaScript实现动态导航菜单，如响应 式设计、下拉菜单等。
表单数据表格
表单数据表格的定义
01
表单数据表格用于展示表单中用户输入的数据，方便用户核对
01
02
03
边框宽度
定义表格边框的宽度，可 以使用像素值或相对单位 。
边框颜色
设置表格边框的颜色，可 以使用颜色名称、十六进 制或RGB值。
边框样式
选择边框的样式，如实线 、虚线、点线等。
表格的背景颜色
背景颜色
为表格设置背景颜色，可以使用 颜色名称、十六进制或RGB值。
背景图片
为表格添加背景图片，可以选择 图片的路径和大小。
响应式设计的优势
响应式设计可以使网页在不同设备上都能良好显示，提高用户体验。同 时，它还可以减少维护成本，因为只需要维护一套代码即可适应不同设 备的屏幕大小和分辨率。
HTML语言—列表.ppt
有序列表标记<OL>
有序列表使用编号，按数字或者字母等顺 序排列列表项目。
基本语法： <OL>
<LI>项目一</LI> <LI>项目二</LI> <LI>项目三</LI>
语法解释：<OL>标 记定义有序列表， <LI>作为每一个项 目的起始。 </LI> 可以省略。
……
</OL>
<!--
文件范例： EX0356.htm
<!-- 文件说明： 列表嵌套
-->
<html>
<head>
<title>列表嵌套</title>
</head>
<body>
<h2>网页制作与设计</h2>
<ol type="A">
<li>第一章</li>
<ol type="1">
<li>第一节</li>
<ol type="I">
<li>第1.1节</li>
<LI>项目三</LI>
……
</DIR>
<!--
文件范例： EX0360.htm
-->
<!-- 文件说明：建立目录列表
-->
<html>
<head>
<title>建立目录列表</title>
HTML 课件7-表格
使用表格
目标
• 学会使用HTML标签创建表格
表格
列
表格标题
列标题 单元格 行
文档中， 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 可以包含文本、图片、列表、段落、表单、水平线、 可以包含文本、图片、列表、段落、表单、水平线、表格等等
创建表格
<HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE>代表表格的开始，border=2表示 <TABLE BORDER = 2 > 边框尺寸为2 <TR> <TD>姓名</TD> <TR>表示行，这是表格的第一行，有三列 <TD>性别</TD> 数据，<TD>代表列 <TD>分数</TD> </TR> <TR> <TD>Robert</TD> 表格的第二行，有三列数据 <TD>M</TD> <TD>80</TD> </TR> 表格的第三行，也有三列数据 ....... </TABLE> </BODY> </HTML>
Frame的属性值及描述
属性值 Above Below Border Hsides Lhs Rhs Void Vsides 描述 显示上边框 显示下边框 显示上下左右边框 显示上下边框 显示左边框 显示右边框 不显示边框 显示左右边框
Rules的属性值及描述
属 性值 All Cols Groups None Rows 描 述
目标
• 学会使用HTML标签创建表格
表格
列
表格标题
列标题 单元格 行
文档中， 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 可以包含文本、图片、列表、段落、表单、水平线、 可以包含文本、图片、列表、段落、表单、水平线、表格等等
创建表格
<HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE>代表表格的开始，border=2表示 <TABLE BORDER = 2 > 边框尺寸为2 <TR> <TD>姓名</TD> <TR>表示行，这是表格的第一行，有三列 <TD>性别</TD> 数据，<TD>代表列 <TD>分数</TD> </TR> <TR> <TD>Robert</TD> 表格的第二行，有三列数据 <TD>M</TD> <TD>80</TD> </TR> 表格的第三行，也有三列数据 ....... </TABLE> </BODY> </HTML>
Frame的属性值及描述
属性值 Above Below Border Hsides Lhs Rhs Void Vsides 描述 显示上边框 显示下边框 显示上下左右边框 显示上下边框 显示左边框 显示右边框 不显示边框 显示左右边框
Rules的属性值及描述
属 性值 All Cols Groups None Rows 描 述
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
地表达意思,如<br>
标记的属性
<html> <body> <p><b>横看成岭侧成峰</B></p> <font color=red>远近高低各不同</font><br> <h1>不识庐山真面目</h1> <h2>只缘身在此山中</h2> <h2>苏轼</h2> </body> </html>
标记的属性
<i>苏轼</i> 字体缩细<s令m字a体ll稍>为一缩细首著名的唐诗</small> 加重语气</产b生od字y体>加粗 Bold 的效果 下标字 下<标/h字tml>
上标字 指数（平方、立方等）
</html>
HTML文档基本结构
一个HTML文档的基本结构： • <html> • <head> • <title>标题</title> • </head>
• <body> • 正文 • </body> • </html>
7
• 例如：如果要在浏览器中显示一段粗体文本， 可以表示为： <b>国庆节放假通知</b>
标记 <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u>
文件格式标记
说明及作用
<p><b>横看成岭侧成峰</b></p> 粗体标记<f产o生n字t c体o加lo粗r的=效re果d><strong>远近高低各不同</strong></font> 字体加大<b令r字>体稍为加大 强调标记<b字i体g>出不现斜识体效庐果山真面目</big> 斜体标记<e字m体>出只现斜缘体效身果在此山中</em>
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
• 背景色彩和文字色彩 – <body bgcolor=# text=# link=# alink=# vlink=#> • bgcolor --- 背景色彩 • text --- 非可链接文字的色彩 • link --- 可链接文字的色彩 • alink --- 正被点击的可链接文字的色彩 • vlink --- 已经点击(访问)过的可链接文字的色彩 • #=rrggbb • 色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
9
标记 <html> <body> <h1> …… <h6> <p> <br> <hr> <!--> <strong> <b> <i> <font> <big> <small> <strike> <ol> <ul> <li> <dl> <dt&作用 文件声明，让浏览器知道这是 HTML 文件 设计文件格式及正文所在 一级标题标记变粗变大加宽程度与级数反比 段落标记为字、画、表格等之间留一空白行 换行标记令字、画、表格等显示于下一行 水平线 插入一条水平线 说明标记 为文件加上说明，但不被显示 加重语气 产生字体加粗 Bold 的效果 粗体标记 产生字体加粗的效果 斜体标记 字体出现斜体效果 字形标记 设定字形、大小、颜色 字体加大 令字体稍为加大 字体缩细 令字体稍为缩细 画线删除 为字体加一删除线 顺序列表 清单项目将以数字、字母顺序排列 无序列表 清单项目将以圆点排列 列表项目 每一标记标示一项列表项目 定义列表 列表分两层出现 定义条目 标示该项定义的标题 定义内容 标示定义内容
• 如果要对显示文本继续设置字体，可以表示为： < b><font size=“+2” face=“ 黑 体 ”color= “blue”>国庆节放假通知</font></b>
8
页面属性
• 语言字符集(Charsets)的信息 -<meta http-equiv="Content-Type" content="text/html;charset=#">
<body text="#ff0000" bgcolor="#d8e4d7">
<html> <body> <p><b>横看成岭侧成峰</B></p> <font color=red>远近高低各不同</font><br> <h1>不识庐山真面目</h1> <h2>只缘身在此山中</h2> <h2>苏轼</h2> </body>
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
HTML的简介
• HTML 是 Hyper Text Markup Language 的第一个大写字 母的组合，中文意思为超文本标记语言.
•HT一ML个定H义TM了L文一件系是列一的个标包记含，有控H制TM网L标页记显的示文的本文文档件、字符、 • HTML标记告诉Web浏览器如何显示网页 •段落一，个文HT本ML中文嵌件入必图须像是、一声个音ht、m或动h画tm，l扩提展供名超的文文本件链接， •支持一脚个本HT语ML言文、件J可AV以A小用程记序事,本实现网页交互效果。
/UltraEdit/EditPlus/Dreamweaver编辑
<html> <head> <title>这是我的第一个网页</title> </head> <body> 这是我的第一个网页 <b>你好！</b> </body> </html>
HTML 标记
• HTML标记是用来组成HTML元素的 • HTML标记用两个尖括号”<>”括起来 • HTML标记一般是双标记，如<b>和</b> • 前一个标记是起始标记, 后一个标记为结束标记 • 两个标记之间的文本是html元素的内容 • 某些标记称为“单标记”,因为它只需单独使用就能完整
标记的属性
<html> <body> <p><b>横看成岭侧成峰</B></p> <font color=red>远近高低各不同</font><br> <h1>不识庐山真面目</h1> <h2>只缘身在此山中</h2> <h2>苏轼</h2> </body> </html>
标记的属性
<i>苏轼</i> 字体缩细<s令m字a体ll稍>为一缩细首著名的唐诗</small> 加重语气</产b生od字y体>加粗 Bold 的效果 下标字 下<标/h字tml>
上标字 指数（平方、立方等）
</html>
HTML文档基本结构
一个HTML文档的基本结构： • <html> • <head> • <title>标题</title> • </head>
• <body> • 正文 • </body> • </html>
7
• 例如：如果要在浏览器中显示一段粗体文本， 可以表示为： <b>国庆节放假通知</b>
标记 <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u>
文件格式标记
说明及作用
<p><b>横看成岭侧成峰</b></p> 粗体标记<f产o生n字t c体o加lo粗r的=效re果d><strong>远近高低各不同</strong></font> 字体加大<b令r字>体稍为加大 强调标记<b字i体g>出不现斜识体效庐果山真面目</big> 斜体标记<e字m体>出只现斜缘体效身果在此山中</em>
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
• 背景色彩和文字色彩 – <body bgcolor=# text=# link=# alink=# vlink=#> • bgcolor --- 背景色彩 • text --- 非可链接文字的色彩 • link --- 可链接文字的色彩 • alink --- 正被点击的可链接文字的色彩 • vlink --- 已经点击(访问)过的可链接文字的色彩 • #=rrggbb • 色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
9
标记 <html> <body> <h1> …… <h6> <p> <br> <hr> <!--> <strong> <b> <i> <font> <big> <small> <strike> <ol> <ul> <li> <dl> <dt&作用 文件声明，让浏览器知道这是 HTML 文件 设计文件格式及正文所在 一级标题标记变粗变大加宽程度与级数反比 段落标记为字、画、表格等之间留一空白行 换行标记令字、画、表格等显示于下一行 水平线 插入一条水平线 说明标记 为文件加上说明，但不被显示 加重语气 产生字体加粗 Bold 的效果 粗体标记 产生字体加粗的效果 斜体标记 字体出现斜体效果 字形标记 设定字形、大小、颜色 字体加大 令字体稍为加大 字体缩细 令字体稍为缩细 画线删除 为字体加一删除线 顺序列表 清单项目将以数字、字母顺序排列 无序列表 清单项目将以圆点排列 列表项目 每一标记标示一项列表项目 定义列表 列表分两层出现 定义条目 标示该项定义的标题 定义内容 标示定义内容
• 如果要对显示文本继续设置字体，可以表示为： < b><font size=“+2” face=“ 黑 体 ”color= “blue”>国庆节放假通知</font></b>
8
页面属性
• 语言字符集(Charsets)的信息 -<meta http-equiv="Content-Type" content="text/html;charset=#">
<body text="#ff0000" bgcolor="#d8e4d7">
<html> <body> <p><b>横看成岭侧成峰</B></p> <font color=red>远近高低各不同</font><br> <h1>不识庐山真面目</h1> <h2>只缘身在此山中</h2> <h2>苏轼</h2> </body>
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
HTML的简介
• HTML 是 Hyper Text Markup Language 的第一个大写字 母的组合，中文意思为超文本标记语言.
•HT一ML个定H义TM了L文一件系是列一的个标包记含，有控H制TM网L标页记显的示文的本文文档件、字符、 • HTML标记告诉Web浏览器如何显示网页 •段落一，个文HT本ML中文嵌件入必图须像是、一声个音ht、m或动h画tm，l扩提展供名超的文文本件链接， •支持一脚个本HT语ML言文、件J可AV以A小用程记序事,本实现网页交互效果。
/UltraEdit/EditPlus/Dreamweaver编辑
<html> <head> <title>这是我的第一个网页</title> </head> <body> 这是我的第一个网页 <b>你好！</b> </body> </html>
HTML 标记
• HTML标记是用来组成HTML元素的 • HTML标记用两个尖括号”<>”括起来 • HTML标记一般是双标记，如<b>和</b> • 前一个标记是起始标记, 后一个标记为结束标记 • 两个标记之间的文本是html元素的内容 • 某些标记称为“单标记”,因为它只需单独使用就能完整