WEB平台开发培训——html.ppt

1、练习说明：基本样式按照图片的就可以，字体和颜色可以不与图片一致； 答案：table_exercise.html 2、使表格线变细（实际就是两个相邻单元格公用一个边框）：style="border-collapse:collapse;“ 可用值的说明. 1）separate, 缺省值。边框分开，不合并。 2）collapse, 边框合并。 即如果相邻则共用同一个边框。 1、内容简介 1）介绍表单的基本使用 2）各种input标记的应用 2、内容重点及难点（input标记的使用） 3、授课方法：讲授+练习+讲解 1、表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。 1、控件： 名称：编码时指定； 值：来自用户的输入，或者编码时的默认值； 2、 1、method：get传送的数据量小于1024字节，表单提交时表单域数值将在地址栏显示。 post传送的数据量不受限制，表单提交时表单域数值将不会在地址栏显示。 注意：GET方式提交的数据最多只能有1024字节；//以此为准；（还有说4000字符的） 2、action：如果需要将表单数据发送到一个电子信箱，可以使用 action="mailto:电子信箱" 的形式。 1、value：输入的值。 对text和hidden类型，是表单域的缺省值。 对checkbox和radio类型，是被选择后传给CGI程序的取值。 对reset和submit类型，是按钮上显示的文字。 2、 1、value：输入的值。 对text和hidden类型，是表单域的缺省值。 对checkbox和radio类型，是被选择后传给CGI程序的取值。 对reset和submit类型，是按钮上显示的文字。 2、 1、text与password不一样长的原因：两者都设置为size=10，但是在IE浏览器中显示不一样长。text_password.html 因为password默认为英文字体；而text默认为当前设置的语言字体，在中文环境里默认是中文；两者解决方法： 1）为input设置font-family英文字体：input { font-family:'Verdana'; } 2）将text和password的width属性设置为相同的宽度值 ： <input name="textinput" type="text" size="30" maxlength="12" style="width:200px"> <input name="passwordinput" type="password" size="30" maxlength="12" style="width:200px"> 1、提交按钮触发HTTP请求，将表单内容提交 2、重置按钮将表单内容置为原始状态； <button name="btn" onclick="alert()" type="submit"> <img src="finger_ring.jpg" width="100" height="100"> </button> 1、相同名字的单选按钮为一组 1、用户可以在文件名称框中直接输入路径，或者单击浏览按钮调出文件选择对话框来选择文件； 表单中enctype="multipart/form-data "的意思， 是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data ，才能完整的传递文件数据，进行下面的操作. enctype="multipart/form-data "是上传二进制数据; 2、利用iframe来做无刷新上传　　要实现文件上传，form必须设置几个属性：　　1.action：设为要处理数据的页面地址；　　2.method：设为"post"；　　3.enctype/encoding：必须设为"multipart/form-data"，这里要注意的是在ie中用js修改form的enctype属性是没有效果的，只能修改encoding； 　　iframe实现无刷新上传的原理：利用form的target属性，把数据提交到页面中一个（通常为隐藏的）iframe上。直观点说就是把“刷新”留给iframe。　　其实原理跟一般用iframe实现无刷新提交表单是一样的，只是这里换成是文件。　　这里关键就是把form的target设为iframe的name 1、功能： a、跟踪用户 b、为服务器端程序提供预定义的输入 c、在动态生成的页面中存储上下文相关的信息 1、英文字符为单位，即