第四讲 HTML表单元素_第1页
第四讲 HTML表单元素_第2页
第四讲 HTML表单元素_第3页
第四讲 HTML表单元素_第4页
第四讲 HTML表单元素_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第四讲 HTML表单元素主要教学内容：1 Html表单，数据提交方式；2 常用的Html控件重点和难点：1 表单的post和get 提交方式，action属性；2 常用的Html控件的使用。一、HTML表单(Forms)HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。【例】<html> <head> <title>表单</title> </head><body><form action="accept.jsp" method="get">

2、; 请输入你的姓名： <input type="text" name="yourname"> <input type="submit" value="提交"></form></body>HTML表单有三个要点：· 表单控件(Form Controls) · Action · Method(1) 表单控件(Form Controls)通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，in

3、put type= "text"就是一个表单控件，表示一个单行输入框。(2) action规定当提交表单时，向何处发送表单数据。用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的action="accept.jsp"(3) method表示了提交表单数据的方式。form表单的method方法，有两个post和get两个值。都可向服务器提交数据1) post传输数据时，不需要在URL中显示出来，而Get方法要在URL中显示。2) Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限

4、制,只能传递大约1024字节.。3) Post顾名思义,就是为了将数据传送到服务器端,Get就是为了从服务器端取得数据4) Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。 5) Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。 6) Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或

5、者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。二常用控件(Controls)HTML表单(Form)常用控件有：² input type="text"单行文本输入框² input type="password"密码输入框(输入的文字用*表示)² input type="submit"将表单(Form)里的信息提交给表单里a

6、ction所指向的文件² input type="checkbox"复选框² input type="radio"单选框² select下拉框² textArea多行文本输入框1单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下： <input type="text" name="yourname">2密码输入框(input type="password"

7、)密码输入框(input type="password")主要用于一些保密信息的输入，如下：<input type="password" name="yourpw">3.按钮(input type="button")<input type="button" name="yourpw" value=”确定”>4提交按钮(input type="submit")通过提交(input type=submit)可以将表单(Form)里的信息

8、提交给表单里action所指向的文件。例句如下：<input type="submit" value="提交">5重置按钮<input type="reset">当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。<input type="reset" value="重置" />【学生练习】制作一个常用的登录窗口6. 图片提交按钮(input type="image")input type=image 相当于 input t

9、ype=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。<input type="image" src ="images/icons/go.gif" alt = "提交" NAME="imgsubmit">【例】<html><head><title>输入用户姓名</title></head><body><form method="get&quo

10、t;>请输入你的姓名：<input type="text" name="yourname"><br><input type="image" src ="images/icons/go.gif" NAME="imagesubmit"></form></body></html>7复选框(input type="checkbox")复选框允许用户在一组选项里，选择多个。如：<input type=&

11、quot;checkbox" name="fruit" value ="apple">苹果<br><input type="checkbox" name="fruit" value ="orange">桔子<br><input type="checkbox" name="fruit" value ="mango">芒果<br>【例如】<html>&l

12、t;head><title>选择</title></head><body>请选择你喜欢的水果：<br><form method = "post"><input type="checkbox" name="fruit" value ="apple" >苹果<br><input type="checkbox" name="fruit" value ="orange

13、">桔子<br><input type="checkbox" name="fruit" value ="mango">芒果<br><input type="submit" value="提交"></form></body></html>用checked表示缺省已选的选项。<input type="checkbox" name="fruit" value

14、 ="orange" checked>桔子<br>8单选框(input type="radio")使用单选框，让用户在一组选项里只能选择一个。如：<input type="radio" name="fruit" value = "Apple">苹果<br><input type="radio" name="fruit" value = "Orange">桔子<br><

15、;input type="radio" name="fruit" value = "Mango">芒果<br>【例如】<html><head><title>选择</title></head><body>请选择你最喜欢的水果：<br><form method = "post"><input type="radio" name="fruit" value = &

16、quot;Apple">苹果<br><input type="radio" name="fruit" value = "Orange">桔子<br><input type="radio" name="fruit" value = "Mango">芒果<br><input type="submit" value="提交"></form>&l

17、t;/body></html>用checked表示缺省已选的选项。<input type="radio" name="fruit" value = "Orange" checked>桔子<br>9下拉框(select)下拉框(Select)既可以用做单选，也可以用做复选。如下：<select name="fruit" > <option value="apple">苹果 <option value="orange&

18、quot;>桔子 <option value="mango">芒果</select>【例如】<html><body><form method = "post">你最喜欢的水果是：<select name="fruit" ><option value="apple">苹果<option value="orange">桔子<option value="mango">芒果</select><input type="submit" value="提交"></form></body></html>注意：如果要变成复选，加multiple即可。用户用Ctrl来

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论