第6章 设计表单样式

第6章设计表单样式掌握表单的创建运用表单控件实现登录注册功能灵活设计表单样式学习目标010203本章任务任务1：设计表单任务2：设计表单样式任务3：案例实战——表单实现收货地址页面效果任务1设计表单任务描述手机注册页面效果，用于收集用户的姓名、电话、邮箱、密码及验证码等信息，效果如图7-1-1。图7-1-1：手机注册页面任务实现任务分析实现思路设计一个容器盒子DIV，设置宽高及背景颜色。在盒子中创建一个form表单，设置表单的宽高及背景图片。在form表单中创建文本框、密码框、提交按钮、重置按钮，设置每种元素的位置及大小。任务实现基本语法<form>标签action：规定用户点击提交按钮时，表单被提交到的位置method：规定表单提交时所使用的http请求方法，分为get或post两种，区别在于get请求方法提交的信息会被显示在页面的地址栏中，而post请求方法提交的信息不会显示name：定义表单的名称，不能包含特殊字符和空格target：规定action属性中地址的目标（默认：_self）<formaction="…"method="…"name="…"target="…">若干子标签</form>基础案例操作<input>标签用法：它是自闭合标签，根据type属性值的不同，可以变化为多种形态，例如单行文本框、密码框、单选按钮、复选框、文件上传域、普通按钮、提交按钮以及重置按钮等。<input>标签案例：<form>用户名:<inputtype="text"name="name"/><br/>密码:<inputtype="password"name="password"/><br/>性别:<inputtype="radio"name="sex"value="boy"/>男<inputtype="radio"name="sex"value="girl"/>女<br/>爱好:读书<inputtype="checkbox"name="read"value="read"/>跑步<inputtype="checkbox"name="run"value="run"/>逛街<inputtype="checkbox"name="shopping"value="shopping"/>看电影<inputtype="checkbox"name="movie"value="movie"/><br/>文件上传:<inputtype="file"name="file"src="url"/><br/><inputtype="submit"value="提交"/><inputtype="button"value="确定"/><inputtype="reset"value="重置"/></form>图7-1-2：<input>标签案例效果图基础案例操作<select>标签用法：定义下拉列表<select>标签案例：<form>学历：<select><option>高中</option><option>大专</option><option>本科</option><option>研究生</option></select></form>图7-1-3：<select>标签案例效果图基础案例操作<option>标签用法：在定义<select>标签中定义待选择的选项<option>标签案例：<form>学历：<select><option>高中</option><option>大专</option><option>本科</option><option>研究生</option></select></form>图7-1-4：<option>标签案例效果图基础案例操作<textarea>标签用法：定义多行输入字段（文本域）<textarea>标签案例：<form>

个人简介：<textareaname="description">此处是描述信息

</textarea></form>图7-1-5：<textarea>标签案例效果图基础案例操作<button>标签用法：定义可点击的按钮，与<input>标签创建的按钮不同的是，在<button>标签内部，不仅可以放置文本，还可以放置图像。<button>标签案例：<form><buttontype="button">普通按钮</button><br/><buttontype="submit">提交按钮</button><br/><buttontype="reset">重置按钮</button><br/><buttontype="button"><imgsrc="…"></button></form>图7-1-6：<button>标签案例效果图任务实现布局代码样式代码任务描述任务分析任务2设计表单样式任务描述本案例制作宜职官网注册页面效果，用于收集注册用户的邮箱和密码，并设计该注册页面的表单样式，提升用户体验，如图7-2-1所示图7-2-1：宜职官网注册页面任务实现任务分析实现思路设计一个容器盒子DIV，设置宽高及背景图片在盒子中创建一个form表单，并在表单中添加三个文本框和一个提交按钮通过CSS设置该表单样式任务实现基本语法基本语法width：设置宽度height：设置高度border：设置边框属性font：设置字体background-color：设置背景颜色基础案例操作1．设置文本框和文本域样式用法1：文本框的常用样式有设置宽度、高度、边框属性、字体、背景等图7-2-2：设置文本框和文本域样式样式代码基础案例操作1．设置文本框和文本域样式用法2：使用伪类选择器设置鼠标划入文本框或文本框获得焦点时文本框的样式:hover设置鼠标划入文本框时的样式；:focus设置当前文本框获得焦点时的样式。图7-2-3：设置文本框和文本域样式样式代码基础案例操作2．设置单选框和复选框样式用法：设置单选框和复选框中的图标样式。图7-2-4：设置单选框和复选框样式布局代码布局代码基础案例操作3．设置下拉列表样式用法：设置下拉列表中显示的字体和边框样式图7-2-5：设置下拉列表样式样式代码任务实现布局代码样式代码任务描述任务分析任务3案例实战——表单实现收货地址页面效果任务描述根据给定的素材背景图片，设计如图7-3-1的页面效果。图7-3-1：