使用HTML制作网页探讨.ppt

表单的执行原理 Internet 1 2 客户端：请求登录，通过表单填写账户信息 服务器端：验证发来的账号信息，然后给出反馈 客户端和服务器类似两人沟通一样，从而建立交互活动 表单的典型应用：假定登录 126 邮箱 单行文本框(text) 单选按钮(radio) 复选框(checkbox) 下拉列表(select) 重置按钮 (reset) 提交按钮(submit) 密码框(password) 常见的表单元素 文本域(textarea) 文件选择框(file) form action=表单提交地址 method=提交方法 … 文本框、按钮等表单元素… /form 表单基本结构--form标签 语法 action属性： 如果为空则代表向当前页面提交 method属性：可选值 post | get get方法提交参数在地址栏可见 post方法一般用于多数据、保密数据提交  注意 input name=表单元素名称 type=类型 value=值 size=显示宽度 maxlength=“最大长度 checked=是否选中 / 表单基本元素-input标签 语法 type属性：可选值 text（默认）、password、button、checkbox、radio等 checked属性： 仅与 input type=checkbox 或 input type=radio 配合使用，选中值为 checked  注意 课堂演示 需求说明 使用表单元素制作注册页面 要求： 制作注册页面内容 使用HTML基本标签完成 演示示例：商城注册页面2-1 小结 各类表单元素 type 功能 例子 text 单行文本输入 input type=text name=username / password 密码 input type=password name=password / radio 单选 input type=radio name=sex value=男 /男 input type=radio name=sex value=女 /女 checkbox 多选 input type=checkbox name=hobby value=书 /书 input type=checkbox name=hobby value=画 /画 reset 重置表单数据 input type=reset value=重置 / file 文件上传 input type=file name=files / submit 提交表单数据 input type=submit value=提交 / hidden 隐藏域 input type=hidden name=name value=1 / button 普通按钮 input type=button value=播放音乐 / 小结 课堂练习 需求说明： 完成网站登录页面 完成时间：10分钟 共性问题集中讲解 1、提交地址：login.html 2、提交方法：post 其他表单元素 select name=指定列表名称 size=显示的行数 option value=选项值 selected=selected…/option … … /select textarea name=... cols=列宽 rows=行宽 文本内容 /textarea 列表框 文本域 关联表单元素 label for=username姓名: /label input name=name id=username size=20/ 或 label 姓名:input name=name size=20/ /label 表单的高级用法2-1 点击label标签鼠标聚焦文本框中 label for=关联元素ID /label 语法 示例 只读属性 readonly：希望某个框内的内容只允许用户看，不能修改 禁用属性 disabled：因没达到使用的条件，限制用户使用 示例 表单的高级用法2-2 input type=text name= value=123 readonly=readonly/ input type=button name= value=点击 disabled=disabled/ 课堂演示 需求说明 使用表单元素制作注册页面 要求 继续完善注册页