HTML表单实例
html问卷调查表单
<optionvalue="female">女</option>
</select><br><br>
<labelfor="country">国家：</label>
<inputtype="text"id="country"name="country"><br><br>
<labelfor="comments">意见和建议：</label><br>
<textareaid="comments"name="comments"rows="4"cols="50"></textarea><br><br>
<inputtype="submit"value="提交">
</form>
</body>
</html>
这个表单包括姓名、邮箱、年龄、性别、国家和意见和建议等字段。当用户填写完表单后，可以点击提交按钮将表单数据提交到服务器的"/submit_survey"处理程序。请注意，这只是一个简单的示例，实际应用中可能需要更多的表单字段和验证逻辑。
html问卷调查表单示例如下：
<!DOCTYPEhtml>
复杂表单例题html
复杂表单例题html在Web开发中，表单是用户与网站进行信息交互的重要组成部分。
复杂表单通常包含多个字段、选项和验证规则。
以下是一个HTML复杂表单的例题，包含了常见的表单元素和一些基本的验证需求。
1. 表单基本结构：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-sc ale=1.0"><title>复杂表单示例</title><link rel="stylesheet"href="styles.css"><!--样式表链接--></head><body><form id="complexForm"action="submit.php"method="post"> <!--姓名--><label for="name">姓名：</label><input type="text"id="name"name="name"required><!--邮箱--><label for="email">邮箱：</label><input type="email"id="email"name="email"required><!--电话--><label for="phone">电话：</label><input type="tel"id="phone"name="phone"pattern="[0-9] {3}-[0-9]{3}-[0-9]{4}"placeholder="123-456-7890"required><!--性别--><label>性别：</label><input type="radio"id="male"name="gender"value="mal e"checked><label for="male">男性</label><input type="radio"id="female"name="gender"value="fe male"><label for="female">女性</label><!--兴趣爱好--><label>兴趣爱好：</label><input type="checkbox"id="reading"name="interests"val ue="reading"><label for="reading">阅读</label><input type="checkbox"id="traveling"name="interests"val ue="traveling"><label for="traveling">旅行</label><input type="checkbox"id="sports"name="interests"value ="sports"><label for="sports">运动</label><!--下拉框--><label for="country">选择国家：</label><select id="country"name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option></select><!--文本域--><label for="message">留言：</label><textarea id="message"name="message"rows="4"cols="5 0"></textarea><!--提交按钮--><button type="submit">提交</button></form></body></html>2. 说明与解析：•<form>标签：包裹整个表单，定义了表单的基本属性，如action 和method。
htmltable表单用法
HTML表格（table）是一种用于显示数据的数据结构，它可以包含行（tr）和列（td）。
以下是一个简单的HTML表格表单用法示例：```html<!DOCTYPE html><html><head><title>HTML表格表单</title></head><body><h2>简单的HTML表格表单</h2><table border="1"><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr><tr><td>王五</td><td>28</td><td>深圳</td></tr></table></body></html>```在这个示例中，我们创建了一个包含3列（姓名、年龄、城市）的表格。
每行表示一个人的信息，包括他们的姓名、年龄和所在城市。
我们还为表头添加了`<th>`标签，以区分表头和表格内容。
HTML表单模板
HTML表单模板 1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>登录表单</title>6</head>7<body>8<!-- get post 区别 -->9<form method="post" action="地址">10<table border="1px" cellspacing="0" width="600px">11<tbody>12<tr height="40px">13<td rowspan="4" align="center">总体信息</td>14<td colspan="2"></td>1516</tr>17<tr height="40px">1819<td align="right">⽤户名：</td>20<td>21<input type="text" name="username"/>22</td>23</tr>24<tr height="40px">2526<td align="right">密码：</td>27<td>28<input type="password" name="userpasswd">29</td>30</tr>31<tr height="40px">3233<td colspan="2" align="center">34<input type="submit" value="提交"/>35<input type="reset" value="重置"/>36</td>3738</tr>3940</tbody>41</table>42</form>43</body>44</html>。
HTML表单实例.ppt
• 图象和文字的对齐 <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中div 和 表单的简单运用
html中div 和表单的简单运用在HTML中，<div>和<form>是两个常用的元素，它们各自有着特定的用途。
<div>元素：<div>元素是一个块级元素，通常用于对其他元素进行分组或布局。
它本身并不代表任何特殊的语义，但其样式和布局可以通过CSS 来定义和调整。
例如，你可以使用CSS为<div>设置背景色、边框、宽度和高度等属性。
下面是一个简单的例子：html复制代码<div style="background-color: lightblue; width: 200px; height: 200px;">这是一个div元素。
</div><form>元素：<form>元素用于创建一个HTML表单，用户可以在其中输入数据，例如文本、复选框、单选按钮、提交按钮等。
这些数据可以发送到服务器进行处理。
下面是一个简单的表单例子：html复制代码<form action="/submit" method="post">姓名：<input type="text" name="name"><br>邮箱：<input type="email"name="email"><br><input type="submit" value="提交"></form>在这个例子中，当用户填写完姓名和邮箱并点击“提交”按钮后，表单数据将被发送到服务器的"/submit"路径，处理方法为POST。
结合使用<div>和<form>：你还可以将<div>元素与<form>元素结合使用，以实现更复杂的布局和样式。
6款漂亮HTMLCSS样式用户留言表单
6款漂亮HTMLCSS样式⽤户留⾔表单如今我们的⽹站、页⾯更加需要注重细节，不论是字体的样式、还是图⽚的分辨率清晰度都会影响到⽤户的访问体验和PV，以及⽤户以后是否会回访我们的⽹站/博客。
如果有时间的时候，⽼左也会浏览和阅读相关的前端⽹站和积累⼀些不错的前端资源，在""中展⽰了⼏款不错的价格列表，在这篇⽂章中整理6个⽤户留⾔HTML CSS样式。
标记⾸先我们要在⽹页中加上常⽤的⼏个标签⽂本，⽐如姓名，电⼦邮件，内容以及提交按钮，然后我们针对这些字段⽂本增加和修改样式就可以。
<form action="" method="post" class="STYLE-NAME"><h1>Contact Form<span>Please fill all the texts in the fields.</span></h1><label><span>Your Name :</span><input id="name" type="text" name="name" placeholder="Your Full Name"/></label><label><span>Your Email :</span><input id="email" type="email" name="email" placeholder="Valid Email Address"/></label><label><span>Message :</span><textarea id="message" name="message" placeholder="Your Message to Us"></textarea></label><label><span>Subject :</span><select name="selection"><option value="Job Inquiry">Job Inquiry</option><option value="General Question">General Question</option></select></label><label><span> </span><input type="button" class="button" value="Send"/></label></form>第⼀、基本灰⾊样式：/* Basic Grey */.basic-grey {margin-left:auto;margin-right:auto;max-width: 500px;background: #F7F7F7;padding: 25px 15px 25px 10px;font: 12px Georgia, "Times New Roman", Times, serif;color: #888;text-shadow: 1px 1px 1px #FFF;border:1px solid #E4E4E4;}.basic-grey h1 {font-size: 25px;padding: 0px 0px 10px 40px;display: block;border-bottom:1px solid #E4E4E4;margin: -10px -15px 30px -10px;;color: #888;}.basic-grey h1>span {display: block;font-size: 11px;}.basic-grey label {display: block;margin: 0px;}.basic-grey label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;color: #888;}.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { border: 1px solid #DADADA;color: #888;height: 30px;margin-bottom: 16px;margin-right: 6px;margin-top: 2px;outline: 0 none;padding: 3px 3px 3px 5px;width: 70%;font-size: 12px;line-height:15px;box-shadow: inset 0px 1px 4px #ECECEC;-moz-box-shadow: inset 0px 1px 4px #ECECEC;-webkit-box-shadow: inset 0px 1px 4px #ECECEC;}.basic-grey textarea{padding: 5px 3px 3px 5px;}.basic-grey select {background: #FFF url('down-arrow.png') no-repeat right;background: #FFF url('down-arrow.png') no-repeat right);appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;height: 35px;line-height: 25px;}.basic-grey textarea{height:100px;}.basic-grey .button {background: #E27575;border: none;padding: 10px 25px 10px 25px;color: #FFF;box-shadow: 1px 1px 5px #B6B6B6;border-radius: 3px;text-shadow: 1px 1px 1px #9E3F3F;cursor: pointer;}.basic-grey .button:hover {background: #CF7A7A}第⼆、优雅的Aero样式样式：.elegant-aero {margin-left:auto;margin-right:auto;max-width: 500px;background: #D2E9FF;padding: 20px 20px 20px 20px;font: 12px Arial, Helvetica, sans-serif;color: #666;}.elegant-aero h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 10px 10px 10px 20px;display: block;background: #C0E1FF;border-bottom: 1px solid #B8DDFF;margin: -20px -20px 15px;}.elegant-aero h1>span {display: block;font-size: 11px;}.elegant-aero label>span {float: left;margin-top: 10px;color: #5E5E5E;}.elegant-aero label {display: block;margin: 0px 0px 5px;}.elegant-aero label>span {float: left;width: 20%;text-align: right;padding-right: 15px;margin-top: 10px;font-weight: bold;}.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select { color: #888;width: 70%;padding: 0px 0px 0px 5px;border: 1px solid #C5E2FF;background: #FBFBFB;outline: 0;-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;box-shadow: inset 0px 1px 6px #ECF3F5;font: 200 12px/25px Arial, Helvetica, sans-serif;height: 30px;line-height:15px;margin: 2px 6px 16px 0px;}.elegant-aero textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.elegant-aero select {background: #fbfbfb url('down-arrow.png') no-repeat right; background: #fbfbfb url('down-arrow.png') no-repeat right; appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;}.elegant-aero .button{padding: 10px 30px 10px 30px;background: #66C1E4;border: none;color: #FFF;box-shadow: 1px 1px 1px #4C6E91;-webkit-box-shadow: 1px 1px 1px #4C6E91;-moz-box-shadow: 1px 1px 1px #4C6E91;text-shadow: 1px 1px 1px #5079A3;}.elegant-aero .button:hover{background: #3EB1DD;}第三、简单绿⾊样式：.smart-green {margin-left:auto;margin-right:auto;max-width: 500px;background: #F8F8F8;padding: 30px 30px 20px 30px;font: 12px Arial, Helvetica, sans-serif;color: #666;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.smart-green h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 20px 0px 20px 40px;display: block;margin: -30px -30px 10px -30px;color: #FFF;background: #9DC45F;text-shadow: 1px 1px 1px #949494;border-radius: 5px 5px 0px 0px;-webkit-border-radius: 5px 5px 0px 0px;-moz-border-radius: 5px 5px 0px 0px;border-bottom:1px solid #89AF4C;}.smart-green h1>span {display: block;font-size: 11px;color: #FFF;}.smart-green label {display: block;margin: 0px 0px 5px;}.smart-green label>span {float: left;margin-top: 10px;color: #5E5E5E;}.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {color: #555;height: 30px;line-height:15px;width: 100%;padding: 0px 0px 0px 10px;margin-top: 2px;border: 1px solid #E5E5E5;background: #FBFBFB;outline: 0;-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);font: normal 14px/14px Arial, Helvetica, sans-serif;}.smart-green textarea{height:100px;padding-top: 10px;}.smart-green select {background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width:100%;height:30px;}.smart-green .button {background-color: #9DC45F;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-border-radius: 5px;border: none;padding: 10px 25px 10px 25px;color: #FFF;text-shadow: 1px 1px 1px #949494;}.smart-green .button:hover {background-color:#80A24A;}第四、⽩⾊样式样式：.white-pink {margin-left:auto;margin-right:auto;max-width: 500px;background: #FFF;padding: 30px 30px 20px 30px;box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;-webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;font: 12px Arial, Helvetica, sans-serif;color: #666;border-radius: 10px;-webkit-border-radius: 10px;}.white-pink h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 0px 0px 10px 40px;display: block;border-bottom: 1px solid #F5F5F5;margin: -10px -30px 10px -30px;color: #969696;}.white-pink h1>span {display: block;font-size: 11px;color: #C4C2C2;}.white-pink label {display: block;margin: 0px 0px 5px;}.white-pink label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;color: #969696;}.white-pink input[type="text"], .white-pink input[type="email"], .white-pink textarea,.white-pink select{ color: #555;width: 70%;padding: 3px 0px 3px 5px;margin-top: 2px;margin-right: 6px;margin-bottom: 16px;border: 1px solid #e5e5e5;background: #fbfbfb;height: 25px;line-height:15px;outline: 0;-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);}.white-pink textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.white-pink .button {-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;box-shadow:inset 0px 1px 0px 0px #fbafe3;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');background-color:#ff5bb0;border-radius:9px;-webkit-border-radius:9px;-moz-border-border-radius:9px;border:1px solid #ee1eb5;display:inline-block;color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;font-style:normal;height: 40px;line-height: 30px;width:100px;text-decoration:none;text-align:center;text-shadow:1px 1px 0px #c70067;}.white-pink .button:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');background-color:#ef027d;}.white-pink .button:active {position:relative;top:1px;}.white-pink select {background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;line-height: 15px;height: 30px;}第五、Bootstrap风格样式样式：.bootstrap-frm {margin-left:auto;margin-right:auto;max-width: 500px;background: #FFF;padding: 20px 30px 20px 30px;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #888;text-shadow: 1px 1px 1px #FFF;border:1px solid #DDD;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.bootstrap-frm h1 {font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;padding: 0px 0px 10px 40px;display: block;border-bottom: 1px solid #DADADA;margin: -10px -30px 30px -30px;color: #888;}.bootstrap-frm h1>span {display: block;font-size: 11px;}.bootstrap-frm label {display: block;margin: 0px 0px 5px;}.bootstrap-frm label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;color: #333;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: bold;}.bootstrap-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select{ border: 1px solid #CCC;color: #888;height: 20px;line-height:15px;margin-bottom: 16px;margin-right: 6px;margin-top: 2px;outline: 0 none;padding: 5px 0px 5px 5px;width: 70%;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}.bootstrap-frm select {background: #FFF url('down-arrow.png') no-repeat right;background: #FFF url('down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;height: 35px;line-height:15px;}.bootstrap-frm textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.bootstrap-frm .button {background: #FFF;border: 1px solid #CCC;padding: 10px 25px 10px 25px;color: #333;border-radius: 4px;}.bootstrap-frm .button:hover {background-color: #EBEBEB;border-color: #ADADAD;}第六、暗⿊⾊样式样式：.dark-matter {margin-left: auto;margin-right: auto;max-width: 500px;background: #555;padding: 20px 30px 20px 30px;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #D3D3D3;text-shadow: 1px 1px 1px #444;border: none;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.dark-matter h1 {padding: 0px 0px 10px 40px;display: block;border-bottom: 1px solid #444;margin: -10px -30px 30px -30px;}.dark-matter h1>span {display: block;font-size: 11px;}.dark-matter label {display: block;margin: 0px 0px 5px;}.dark-matter label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;font-weight: bold;}.dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select { border: none;color: #525252;height: 25px;line-height:15px;margin-bottom: 16px;margin-right: 6px;margin-top: 2px;outline: 0 none;padding: 5px 0px 5px 5px;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);background: #DFDFDF;}.dark-matter select {background: #DFDFDF url('down-arrow.png') no-repeat right;background: #DFDFDF url('down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;height: 35px;color: #525252;line-height: 25px;}.dark-matter textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.dark-matter .button {background: #FFCC02;border: none;padding: 10px 25px 10px 25px;color: #585858;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;text-shadow: 1px 1px 1px #FFE477;font-weight: bold;box-shadow: 1px 1px 1px #3D3D3D;-webkit-box-shadow:1px 1px 1px #3D3D3D;-moz-box-shadow:1px 1px 1px #3D3D3D;}.dark-matter .button:hover {color: #333;background-color: #EBEBEB;}总结，⼩⼩的CSS样式能够让⽤户更加欣赏和留住，⽹站模板不⼀定要经常改变，但是可以在原有的基础上慢慢修改和提升⽤户体验，那就从CSS做起。
html form submit session
html form submit session在HTML中，表单（form）是用于收集用户输入的主要工具。
当用户填写表单并点击提交按钮时，表单的数据会被发送到服务器进行处理。
在这个过程中，session起到了非常重要的作用。
HTML FormHTML表单通常包含输入元素（如文本框、复选框、单选按钮等）和一个提交按钮。
下面是一个简单的HTML表单示例：html<form action="/submit" method="post"><label for="username">用户名:</label><br><input type="text" id="username" name="username"><br><label for="password">密码:</label><br><input type="password" id="password" name="password"><br><input type="submit" value="提交"></form>在这个例子中，action="/submit"指定了表单数据提交到的URL，而method="post"指定了HTTP请求方法（在这种情况下是POST）。
Sessionsession是一种在服务器端存储用户信息的机制。
当用户首次访问网站时，服务器会为用户创建一个唯一的session ID，并将其存储在用户的浏览器（通常是通过cookie）中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6
软件学院
1.1.2 HTML基本语法
• HTML通过各种标记、元素、属性、对象等来建 立与文本、图形、声音、视频等多媒体信息、 超文本的链接。
• HTML的语法主要分为三种形式： （1）<标记>对象</标记> （2）<标记 属性1＝参数1 属性2＝参数 2 ... ...>对象</标记> （3）<标记>
13
软件学院
• Get: it is attached to the end of the URL by a ‘?”
/musicSearch.html?song_title=Hello&song_artist=Jones
• Post: it is a separated line after the blank line. song_title=Hello&song_artist=Jones&limit_number=
• 语言字符集(Charsets)的信息 -<meta http-equiv="Content-Type" content="text/html;charset=#">
#= 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
<form action=“URL” method=“” enctype=“” name=“” > ...... <input type=“submit”> <input type=“reset”> </form> • method表单传输方法
– GET方法将表单信息在URL后传输 – POST方法将表单信息作为信息体传输 • action为表单处理方式，通常为一个URL • enctype为编码方式,默认application/x-www-form-urlencoded, UTF-8
• #=rrggbb • 色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
9
软件学院
1.1.3 页面属性
• 链接(Link)
基本语法 <a href="document.html "> ... </a>
7
软件学院
• 例如：如果要在浏览器中显示一段粗体文本， 可以表示为： <b>国庆节放假通知</b>
• 如果要对显示文本继续设置字体，可以表示为： < b><font size=“+2” face=“ 黑 体 ”color= “blue”>国庆节放假通知</font></b>
8
软件学院
1.1.3 页面属性
• 背景音乐 <bgsound src=#> #=WAV 文件的 URL <bgsound loop=#> #=循环数 – <bgsound src="sound.wav" loop=3>
12
软件学院
1.2 HTML表单
• HTML表单:支持用户在页面输入信息 • 提供文本框、单选框、复选框、下拉菜单等控件 • 由<form></form>构成，表单的基本结构如下：
• HTML:超文本标记语言，建立网页的标准语 言。
HTML规范定义了一系列的标识符，控制网页 显示的文档、字符、段落，文本中嵌入图像、 声音、动画，提供超文本链接，支持脚本语 言、JAVA小程序,实现网页交互效果。
5
软件学院
1.1.1 HTML文档基本结构
一个HTML文档的基本结构： • <html> • <head> • <title>标题</title> • </head>
华师大软 件学院
2. HTML表单&实例
毛宏燕
华东师范大学软件学院
1
软件学院
Steps
• HTML • HTML表单（FORM） • Html表单传输机制
2
软件学院
3
软件学院
4
软件学院
1.1 HTML
• HTML : “hypertext markup language” ,
specify links to other documents identified by URLs.
</a>
#=_blank 浏览器会另开一个新窗口显示document.html文档 _self 把文档调入当前页
10
软件学院
1.1.3 页面Βιβλιοθήκη 性• 链入图象的基本语法 <img src=#> #=图象的 URL <img alt=#> #=浏览器未完全读入图象时，在图象位置显示的文字。
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
• 背景色彩和文字色彩 – <body bgcolor=# text=# link=# alink=# vlink=#> • bgcolor --- 背景色彩 • text --- 非可链接文字的色彩 • link --- 可链接文字的色彩 • alink --- 正被点击的可链接文字的色彩 • vlink --- 已经点击(访问)过的可链接文字的色彩
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
11
软件学院
1.1.3 页面属性
• 嵌入多媒体文本(EMBED) 基本语法 <embed src=#> #=URL 标识主页中嵌入多媒体文本，如：电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
<a href="/g/2007-0716/05513042287.html" target=_blank>美洲杯阿根廷风暴难破14年魔咒 巴西3-0完胜.</a>
• 开一个新的(浏览器)窗口 (Target Window) <a href="document.html " target=“#"> ...