表单中的常用控件

任务流程
二、表单中的常用控件
⑹隐藏域
隐藏域不会显示任何输入界面，而是赋予一个内定值随 表单一起传递给服务器。
语法格式：
<input type="hidden" name="?" value="?" >
任务流程
二、表单中的常用控件
⑹隐藏域
“hidden”的常见属性
属性 name value 设定文件域的名称。 返回文件域的值。 功能
电子商务网页制作
HTML中的表单标记
学习目标
知识目标：
能理解常用的表单控件在网页设计中的作用。 能理解标记的名称、常用属性及HTML语法格式。
能力目标： 能掌握表单及表单控件的插入方法。
能掌握表单及表单控件属性的基本设置方法。
任务流程
一、认识表单
表单是网页用于数据输入的基本界面。主要由文本框、多 行文本框、单选按钮、复选框、下拉式菜单、标签和动作按钮 等表单控件组成。表单可以是单一的搜索对话框，也可以是多 页面的数据采集界面。 表单有如下性质： 表单中可以输入一些内容，这些输入功能由控件提 供，叫做表单元素。 表单中一般都有一个按钮负责提交。 点击“提交”按钮，表单元素中的内容会提交给服 务器端。 表单元素放在<form></form>之间。
3．<textarea>……</textarea>标记
有时候用户需要输入比较多的文字，此时，文本框就不 能满足用户的需求，需要一个可以输入大量文字的元件，即 文本域。
语法格式：
<textarea name="?" cols="?" rows="?" wrap="off| virtual|physical" ></textarea>
任务流程
二、表单中的常用控件
2．<select>……</select>标记
和<option>……</option>标记结合使用，用于产生一个 下拉式列表框。 语法格式：
<select name="?" size="?" multiple>
<option value="?" selected>项目文本1</option> <option value="?" >项目文本2</option> …… <option value="?" >项目文本n</option>
属性 name value checked align 设定复选框的名称。 设定复选框中用于选择的选项。 设定默认选择项。 文本框的对齐方式，属性值：left、center、right。 功能
任务流程
二、表单中的常用控件
⑸文件域
可以使用户在本地选择一个文件，并上传给服务器的相 应处理程序。 类型为：type="file"。
任务流程
二、表单中的常用控件
⑷复选框
在多个选项中，用户一次能选多个项。 类型为:type="checkbox"。
语法格式：
<input type="checkbox" name="?" value="?"
align="?" checked >
任务流程
二、表单中的常用控件
⑷复选框
“checkbox”的常见属性
</select>
任务流程
二、表单中的常用控件
2．<select>……</select>标记
<select>的常见属性
属性 name size multiple 功能 设定下拉列表框名称。 设定下拉列表框的选项个数。默认为1，如果大于 1，则以列表形式显示。 设置是否能够多选。
任务流程
二、表单中的常用控件
语法格式：
<input type="radio" name="?" value="?" align="?"
checked >
任务流程
二、表单中的常用控件
⑶单选框
“radio”的常见属性
属性 name value checked align 设定单选框的名称。 设定单选框中用于选择的选项。 设定默认选择项。 文本框的对齐方式，属性值：left、center、right。 功能
fileField
hidden
任务流程
二、表单中的常用控件
1．<Input>标记
<input>标记表示一组用于数据录入的基本控件。表单的
不同类型的元素是通过设定属性type="表单类型"来确定。
任务流程
二、表单中的常用控件
1．<Input>标记
⑴单行文本框和密码框 type="text"：单行文本框。用于输入文本（含 数字、符 号等）内容。 type="password"：密码框。用于接收用户的密码输入，密
任务流程
二、表单中的常用控件
表单中的常用控件
元素 text Button Submit 控件 功能 文本框：用于接收用户输入的文本。 普通按钮：响应用户鼠标点击。 提交按钮：提交表单数据到相应的处理程序。
Reset
Radio Checkbox Select Textarea
重置按钮：清空表单的内容，恢复到初始状态。
语法格式：
<input type="file" name="?" value="?" maxlength="?">
任务流程
二、表单中的常用控件
⑸文件域
“file”的常见属性
属性 name value 设定文件域的名称。 返回文件域的值。 功能
size
maxlength
设定文件域的长度。
设定文件域可接收字符的最大长度。
⑵关于文本域的说法错误的是（ ）。 A）在“属性”面板中可以设置文本域的字符宽度 B）在“属性”面板中可以设置文本域的字符高度
C）在“属性”面板中可以设置文本域所能接受的最多字
符数 D）在“属性”面板中可以设置文本域的初始值
课后练习
1．填空 ⑴用来输入密码的表单控件是________。
⑵在HTML代码中，表单对象应添加在__________和
__________之间。Fra bibliotek课后练习
2．选择题 ⑴下列哪一项表示的不是按钮。（ A）type="submit" C）type="image" ） B）type="reset" D）type="button"
任务流程
二、表单中的常用控件
3．<textarea>……</textarea>标记
<textarea>的常见属性
属性 功能
name
wrap cols rows
设定文本域的名称。
设定文本域中的换行模式，属性值：off，不自动换行； virtual,当按下Enter键时视为换行；physical，自动换行。 设定文本域的行数。 设定文本域的列数。
任务流程
二、表单中的常用控件
⑵按钮
普通按钮：（type="buttom"）单击后执行设定的代码。 提交按钮：（type="submit"）当用户单击这个按钮后， 用户的输入信息即被传送到服务器。 重置按钮：（type="reset"）当用户单击这个按钮后， 用户输入的信息全部清除，用户重新输入信息。 语法格式： <input type="buttom|submit|reset" name="?"
码不回显在屏幕上。
语法格式： <input type="text｜password" name="?" size="?" maxlength="?" value="?">
任务流程
二、表单中的常用控件
1．<Input>标记 “text”及“password”的常见属性
属性 name size value maxlength align 设定文本框的名称。 设定文本框显示的宽度（字符数）。 设定文本框的初始值。 设定文本框可输入字符串的最大长度。 文本框的对齐方式，属性值：left、center、right。 功能
value="?" align="?" >
任务流程
二、表单中的常用控件
⑵按钮
按钮的常见属性
属性 name 设定按钮的名称。 功能
value
align
设定按钮上要显示的文字。
文本框的对齐方式，属性值：left、center、right。
任务流程
二、表单中的常用控件
⑶单选框
在多个选项中，用户一次只能选一个项。 类型为：type=“radio”。
单选按钮：一组选项中只能选择一项。 复选框：一组选项中可以选择多项。 下拉式菜单：从下拉列表中选择项。 多行文本框：又称为文本域，用于接收用户输入的 多行文本。 文件域：获得本地文件路径，作为上传至服务器的 依据。 隐藏域：不在网页中显示出来，主要用途是为网页 交互时存储一些不需要在网页显示的数据。