网页表单美化
WEB PAGE CATEGORY
• 应用CSS
<input class="c1" name="text" type="text" size="30" value="初始值" maxlength="20"/> .c1{ background:red; height:30px; font-size:14px; font-family:"微软雅黑"; color:#FFF;}
文本框与文本域
教学目标
Teaching Goal
1
• 理解表单在网页前端的作用
• 掌握网页文本框与文本域的
设置
2
教学内容
Teaching Content
网页表单
WEB PAGE CATEGORY
• 表单的作用
表单是一个包含表单元素的区域，主要负责数据采集。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框 等等）输入信息的元素。 表单使用表单标签（<form>）定义。 <form> <input /></form>
• Text类别，普通输入型文本框
语法：< input name="username" type="text" size="25" value="张三" maxlength="20"/>
类别
表单长度 值
最长输入字符数
文本框与文本域
WEB PAGE CATEGORY
• Password类别，密码型文本框
效果
网页表单
WEB PAGE CATEGORY
• 表单类别
常用表单有文本框、密码框、文本域、下拉列表、单选框、复选框、文件域、提交、重置、按钮。
• 表单标签
表单类别
WEB PAGE CATEGORY
文 本框 文 本域 单选按钮 复选按钮 表单按钮 下拉菜单
文 件域
文本框与文本域
WEB PAGE CATEGORY
脑洞时间：是否可以将表单边框删除？
ห้องสมุดไป่ตู้
3
教学小结
Teaching Summary
本节主要概述了网页表单在网页中的作用，认识几种常用的表 单类别，重点讲解文本框型表单的相关知识，要求学习者理解 并加以应用。
语法：< input name=“password" type=“password" size=“30" value="张三" maxlength=“8" />
文本框与文本域
WEB PAGE CATEGORY
• 多行文本域
语法：<textarea name="textarea" cols="30" id="text">多行文本域</textarea>