《网页设计与制作教程》课件-第2章 表单

网页设计与制作教程（HTML+CSS+JavaScript）机械工业出版社同名教材配套电子教案2.1表单的工作原理2.2表单标签2.3表单元素2.4表单的高级用法第2章表单表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-1所示。2.1表单的工作原理网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。表单的基本语法及格式为：<formname="表单名"action="URL"method="get|post">…</form>2.2表单标签2.3.1<input>元素<input>元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。<input>元素的基本语法及格式为：<inputtype="表项类型"name="表项名"value="默认值"size="x"maxlength="y"/>2.3表单元素【演练2-1】制作商品图片上传的表单页面，使用文件域上传文件，用户单击“浏览”按钮后，将弹出“打开”对话框。选择文件后，路径将显示在地址文本框中。2.3表单元素

2.3.2选择栏<select>选择栏可分为两种：弹出式和字段式。<select>标签的格式为：<selectsize="x"name="控制操作名"multiple><option…>…</option><option…>…</option>…</select><option>标签的格式为：<optionselectedvalue="可选择的内容">…</option>2.3表单元素2.3.3多行文本域<textarea>…</textarea>在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用<textarea>标签可以设置允许成段文字的输入，格式为：<textareaname="文本域名"rows="行数"cols="列数">

多行文本</textarea>其中的行数和列数是指不拖动滚动条就可看到的部分。2.3表单元素在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景：只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮。只读和禁用效果分别通过设置“readonly”和“disabled”属性来实现。【演练2-2】制作商城服务协议页面，页面浏览后，商城服务协议只能阅读而不能修改，并且只有用户同意注册协议后，才允许单击“注册”按钮。2.4表单的高级用法制作商城“会员注册”表单页面，使用表单技术制作会员注册页面，收集会员的个人资料。首先显示未注册前的初始页面，如图2-4（a）所示；用户可以通过美观便捷的日期选择器设置会员的生日，如图2-4（b）所示；接下来输入完整的会员信息，其中输入的电子邮件地址格式不正确，然后单击“提交”按钮，如图2-4（c）所示；表单提交后，检查出电子邮件地址无效，如图2-4（d）所示