《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块7 网页表单设计

模块五网页表单设计目录任务一任务二任务三注册页面的设计读者留言板的设计引入知识点任务1注册页面的设计7.1了解表单7.2输入元素input任务1注册页面的设计7.1了解表单一个表单由三部分组成：（1）表单标记：包括处理表单数据所用的CGI程序（通用网关接口）的URL和数据提交到服务器的方法。（2）表单域：包括文本框、密码框、复选框、单选框、下拉选择框、文件上传框、多行文本框和隐藏域等。（3）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用来控制其他定义了处理脚本的处理工作。任务1注册页面的设计7.1了解表单1、表单的作用表单在网页中的主要作用是采集用户数据，它提供一个页面，一个入口。表单处理信息的一般过程为：用户在表单中完成信息的填写后，单击表单中的提交按钮时，用户所输入的信息就会提交到服务器，服务器中的应用程序会对这些信息进行处理和响应，完成用户和服务器之间的交互。任务1注册页面的设计7.1了解表单2、表单元素form表单是网页上一个特定的区域，这个区域是由<form>标记定义的，它是一对双标记，<form>标记代表表单区域的开始，</form>标记代表表单区域的结束，在<form>和</form>标记之间的所有内容都属于表单内容。<form>标记的基本语法格式如下：<formname="表单名称"action="表单提交地址"method="数据传输方式">…</form>任务1注册页面的设计7.1了解表单表单常用属性任务1注册页面的设计7.2输入元素input基本语法格式<inputtype="输入控件类型"name="控件名字">任务1注册页面的设计7.2输入元素input根据type属性值的不同可以得到不同的控件类型type常用的属性值任务1注册页面的设计7.2输入元素input1、文本框text基本语法格式：<inputtype="text"name="field_name"value="field_value"size="size_value"maxlength="max_value">文本框属性任务1注册页面的设计7.2输入元素input2、密码框password基本语法格式：<inputtype="password"name="field_name"value="field_value"size="size_value"maxlength="max_value">密码框属性任务1注册页面的设计7.2输入元素input单选按钮属性3、单选按钮radio基本语法格式：<inputtype="radio"name="field_name"value="value"checked>任务1注册页面的设计7.2输入元素input复选框属性4、复选框checkbox基本语法格式：<inputtype="checkbox"name="field_name"value="value"checked>任务1注册页面的设计7.2输入元素input普通按钮属性5、普通按钮button基本语法格式：<inputtype="button"name="field_name"value="button_text">任务1注册页面的设计7.2输入元素input提交按钮属性6、提交按钮submit基本语法格式：<inputtype="submit"name="field_name"value="submit_text">任务1注册页面的设计7.2输入元素input重置按钮属性7、重置按钮reset基本语法格式：<inputtype="reset"name="field_name"value="reset_text">任务1注册页面的设计7.2输入元素input图片按钮属性8、图片按钮image基本语法格式：<inputtype="image"name="field_name"src="image_url">任务1注册页面的设计7.2输入元素input文本域属性9、文本域file基本语法格式：<inputtype="file"name="field_name">任务1注册页面的设计7.2输入元素input隐藏域属性10、隐藏域hidden基本语法格式：<inputtype="hidden"name="field_name">任务1注册页面的设计任务实现（1）创建一个HTML5页面，制作注册页面；（3）使用表格对注册页面的结构进行控制；（2）在页面中插入一个form元素；（4）在表格相对应的位置放入表单输入元素。任务1注册页面的设计注册界面引入知识点任务2读者留言板的设计7.3下拉选择框元素select7.4多行文本域textarea任务2读者留言板的设计7.3下拉选择框元素select下拉选择框也是页面中常用的表单元素，它由<select>标记定义，是一对双标记，<select>标记定义了下拉选择框的开始，</select>标记定义了下拉选择框的结束。可以通过属性设置要显示的选项数量，以及是否允许多项选择等内容。任务2读者留言板的设计7.3下拉选择框元素selectselect元素的常用属性基本语法格式：<selectname="field_name"size="size_value"multiple>…</select>任务2读者留言板的设计7.3下拉选择框元素selectselect元素相当于一个容器，标记当前的下拉选择框是菜单还是列表，而它所包含的菜单或列表中的每一项都是由option元素定义的。option元素定义了下拉选择框里的选项，它也是一对双标记，选项的内容包含在开始标记<option>和结束标记</option>之间。option元素要定义在<select>和</select>标记里面才能发挥作用。任务2读者留言板的设计7.3下拉选择框元素selectoption元素的常用属性option元素基本语法格式：<selectname="field_name"><optionvalue="string"selected>选项1</option><option>选项2</option><option>选项3</option>…</select>任务2读者留言板的设计7.4多行文本域textarea基本语法格式：<textareaname="field_name"cols="number"rows="number"></textarea>textarea元素也是在页面中经常使用的表单元素，它是一对双标记，<textarea>标记为开始标记，</textarea>标记为结束标记，需要在页面显示的初始文本内容放置于<textarea>与</textarea>标记之间。任务2读者留言板的设计7.4多行文本域textareatextarea元素的常用属性任务实