HTML 表单课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4、复选框
<input name=“复选框名称” type=“checkbox”
value=“提交值” checked=”checked”(是否被选中) >
表单元素标记
<label>标注内容</label> 标签为 input 元素定义标注
（标记）。<label> 标签的 for 属性应当与相关元素的
3. 单选框: <input type="radio" name="" value=""/>
4. 多选框：<input type="checkbox" name=""
value=""/>
5. 上传文件：<input type="file" name="pic" /> 6. 下拉列表：<select name="">
<option value=""></option>
</select>
分组的下拉列表： <select name="">
<optgroup label="分组名称"></optgroup>
<option value=""></option>
<option value="">来自百度文库/option>
</select>
<form action="Echo64.asp" method="POST">
<% 文件Echo64.asp name = Request("Name") If Request("sex")="male" Then appellation = "先生" Else appellation = "小姐" ASP文件包括文本、HTML End If 标记、ASP脚本语句（用 city = Request("City") loves = Request("love") <% %>界定符标记）。 Memo = Request("Memo") Memo = Replace(Memo, vbCrLf, "<BR>") %> <HTML> <BODY> <FONT face="华文楷体" color="#990033" SIZE=5> <CENTER><% =name&appellation&" ： 欢迎您!“ %><br> <p>您是<%=city%>人<br> </CENTER> <p>您喜欢的是： <UL><%=loves%></UL> 您的留言是：<br> <p><%=Memo%> </FONT> </BODY> </HTML>
表单元素标记
1、单行文本框(文本域)
<input name=“文本框名称” type=“text” value=“初始值”
size=“显示字符数” maxlength=“最多容纳字符数” readonly=”readonly”(设置为只读) disabled=“disabled” （设置为不可操作）>
表单元素标记
7、按钮
<input type=“按钮类型(reset[重置表单]、submit[提交表 单]、button[普通按钮])” name=“按钮名称” value=“按钮
显示文本”/>
8、图片按钮
<input name="图片按钮名称" type="image" src="图片路
http://localhost/ w / Echo64.asp
name = Request("Name")
If Request("sex")="male" Then appellation = "先生" Else appellation = "小姐" End If
city = Request("City")
loves = Request("love")
Memo = Request("Memo")
表单元素标记
6、 列表框 (A)、菜单式
<select name=“列表框名称”>
<option selected=“selected”(哪个为初始选择，就添加selected语句[只有 一个]) value=“提交值”>列表1</option> <option value=“提交值”>列表2</option>
</optgroup> </select>
表单元素标记
(B)、列表式 <select name=“列表框名称” size=“显示的行数” multiple(如果 允许多选，则有该命令；否则没有此命令)> <option value=“提交值”>列表1</option>
...
</select>
例如： <select name=target size=3 multiple=“multiple”> <option value=普通朋友>普通朋友</option> <option value=爱人 selected>爱人</option> </select>
...
</select>
分组 <optgroup label=" 分组名称 "></optgroup>
表单元素标记
例如： <select name=“citys”> <optgroup label="北京">
<option value=朝阳 selected=“selected” >朝阳</option> <option value=海淀>海淀</option> <option value=东城>东城</option>
表单标记
再次强调：表单元素必须入在form标记内才有作用。 表单属性： <form action=url(传送目标，处理表单信息的服务器端应用程序) method=处理表单数据的方法(POST/GET) 如果不写 method则默认提交方式为 get
name=表单名称>
表单元素
</form>
POST 方法可以传递大量信息 GET 方法将值附加到请求该页的URL 中。适合传 递少量信息(默认方式)
表单
将我们的信息提交给服务器-表单
“表单”是网页上用于输入信息的区域，它的主要 功能是收集用户信息，并将这些信息传递给后台
服务器，实现网页与用户的沟通。
是客户端与服务器端进行信息交流的途径
一个完整的表单通常由表单控件（表单元素），
提示信息，表单域（容纳表单控件和提示信息）
三部分构成
</form>之间添加相应控件。
表单基本结构
<form action="url" method=GET|POST> 表单内容： 文本框、单选钮、选择框、输入成段 文字、发送、复位按钮...... <input type=submit> 提交按钮 <input type=reset>复位按钮 </form>
表单域
（相当于一个容 器）
提示信息
表单控件
（包含了具体的 表单功能项）
要想让表单的数据传送给后台服务器，就必须定义 表单域。
<form></form>用于定义表单域，即创建一个表单
。实现用户信息的收集和传递， <form></form>
中的所有内容都会被提交给服务器。
注意：<form>标记的属性不会直接影响表单的显示 效果。要想让一个表单有意义，必须在<form>与
post/get”>…...</form>
Post方法可以传递大量信息（主流） Get方法将值附加到请求该页的URL中，适合传递少量信息（默认）
表单的元素 input标签必须含有name 属性和type属性 1. 文本框： <input type="text" name=“” />
2. 密码框： <input type="password" name=“”/>
2、密码框
<input name=“文本框名称” type=“password”
value=“初始值” size=“显示字符数”/>
注意：input标记必须的属性是name和type
表单元素标记
3、 单选框
<input name=“单选框名称” type=“radio” value=“提
交值” checked=”checked”(是否被选中) />
Name=林琳； appellation=小姐； city= 北京； loves=体育，音乐，电影
Memo= 你们好！ 在哪儿能看到免费电影？
<HTML> <BODY> <FONT face="华文楷体" color="#990033" SIZE=5> <CENTER><% =name&appellation&" ： 欢迎您!" %><br> <p>您是<%=city%>人<br> </CENTER> <p>您喜欢的是： <UL><%=loves%></UL> 您的留言是：<br> <p><%=Memo%> </FONT> </BODY> </HTML>
id 属性相同
<label for="man">男</label>
<input
type=radio name=sex value=男 id="man">
表单元素标记
5、多行文本框 <textarea name=“多行文本框名称” cols=“每行中的字符数” rows=“显示的行数”> 初始内容 </textarea>
径" />
9、隐藏域
<input name=“名称” type=“hidden” value=“提交
值”/>
<fieldset></fieldset>标记用于为表单内容分组，它 有一个配套标记<legend></legend>,用于为各个表
单组定义名称。
总结
所有的表单元素，必须放在<form></form>标记中 <form action=“URL” method=“表单的提交方式
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" />
2. 重置按钮 <input type="reset" value="" />
3. 普通按钮 <input type="button" value="" />
4. 图片按钮 <input type="image" src="" />
注意：图片按钮的功能相当于提交按钮
<p>留言： <p><textarea name="Memo" rows="4" cols="60"></textarea> <p><input type="submit" value="提交"> <input type="reset" value="清空">
<input name=“复选框名称” type=“checkbox”
value=“提交值” checked=”checked”(是否被选中) >
表单元素标记
<label>标注内容</label> 标签为 input 元素定义标注
（标记）。<label> 标签的 for 属性应当与相关元素的
3. 单选框: <input type="radio" name="" value=""/>
4. 多选框：<input type="checkbox" name=""
value=""/>
5. 上传文件：<input type="file" name="pic" /> 6. 下拉列表：<select name="">
<option value=""></option>
</select>
分组的下拉列表： <select name="">
<optgroup label="分组名称"></optgroup>
<option value=""></option>
<option value="">来自百度文库/option>
</select>
<form action="Echo64.asp" method="POST">
<% 文件Echo64.asp name = Request("Name") If Request("sex")="male" Then appellation = "先生" Else appellation = "小姐" ASP文件包括文本、HTML End If 标记、ASP脚本语句（用 city = Request("City") loves = Request("love") <% %>界定符标记）。 Memo = Request("Memo") Memo = Replace(Memo, vbCrLf, "<BR>") %> <HTML> <BODY> <FONT face="华文楷体" color="#990033" SIZE=5> <CENTER><% =name&appellation&" ： 欢迎您!“ %><br> <p>您是<%=city%>人<br> </CENTER> <p>您喜欢的是： <UL><%=loves%></UL> 您的留言是：<br> <p><%=Memo%> </FONT> </BODY> </HTML>
表单元素标记
1、单行文本框(文本域)
<input name=“文本框名称” type=“text” value=“初始值”
size=“显示字符数” maxlength=“最多容纳字符数” readonly=”readonly”(设置为只读) disabled=“disabled” （设置为不可操作）>
表单元素标记
7、按钮
<input type=“按钮类型(reset[重置表单]、submit[提交表 单]、button[普通按钮])” name=“按钮名称” value=“按钮
显示文本”/>
8、图片按钮
<input name="图片按钮名称" type="image" src="图片路
http://localhost/ w / Echo64.asp
name = Request("Name")
If Request("sex")="male" Then appellation = "先生" Else appellation = "小姐" End If
city = Request("City")
loves = Request("love")
Memo = Request("Memo")
表单元素标记
6、 列表框 (A)、菜单式
<select name=“列表框名称”>
<option selected=“selected”(哪个为初始选择，就添加selected语句[只有 一个]) value=“提交值”>列表1</option> <option value=“提交值”>列表2</option>
</optgroup> </select>
表单元素标记
(B)、列表式 <select name=“列表框名称” size=“显示的行数” multiple(如果 允许多选，则有该命令；否则没有此命令)> <option value=“提交值”>列表1</option>
...
</select>
例如： <select name=target size=3 multiple=“multiple”> <option value=普通朋友>普通朋友</option> <option value=爱人 selected>爱人</option> </select>
...
</select>
分组 <optgroup label=" 分组名称 "></optgroup>
表单元素标记
例如： <select name=“citys”> <optgroup label="北京">
<option value=朝阳 selected=“selected” >朝阳</option> <option value=海淀>海淀</option> <option value=东城>东城</option>
表单标记
再次强调：表单元素必须入在form标记内才有作用。 表单属性： <form action=url(传送目标，处理表单信息的服务器端应用程序) method=处理表单数据的方法(POST/GET) 如果不写 method则默认提交方式为 get
name=表单名称>
表单元素
</form>
POST 方法可以传递大量信息 GET 方法将值附加到请求该页的URL 中。适合传 递少量信息(默认方式)
表单
将我们的信息提交给服务器-表单
“表单”是网页上用于输入信息的区域，它的主要 功能是收集用户信息，并将这些信息传递给后台
服务器，实现网页与用户的沟通。
是客户端与服务器端进行信息交流的途径
一个完整的表单通常由表单控件（表单元素），
提示信息，表单域（容纳表单控件和提示信息）
三部分构成
</form>之间添加相应控件。
表单基本结构
<form action="url" method=GET|POST> 表单内容： 文本框、单选钮、选择框、输入成段 文字、发送、复位按钮...... <input type=submit> 提交按钮 <input type=reset>复位按钮 </form>
表单域
（相当于一个容 器）
提示信息
表单控件
（包含了具体的 表单功能项）
要想让表单的数据传送给后台服务器，就必须定义 表单域。
<form></form>用于定义表单域，即创建一个表单
。实现用户信息的收集和传递， <form></form>
中的所有内容都会被提交给服务器。
注意：<form>标记的属性不会直接影响表单的显示 效果。要想让一个表单有意义，必须在<form>与
post/get”>…...</form>
Post方法可以传递大量信息（主流） Get方法将值附加到请求该页的URL中，适合传递少量信息（默认）
表单的元素 input标签必须含有name 属性和type属性 1. 文本框： <input type="text" name=“” />
2. 密码框： <input type="password" name=“”/>
2、密码框
<input name=“文本框名称” type=“password”
value=“初始值” size=“显示字符数”/>
注意：input标记必须的属性是name和type
表单元素标记
3、 单选框
<input name=“单选框名称” type=“radio” value=“提
交值” checked=”checked”(是否被选中) />
Name=林琳； appellation=小姐； city= 北京； loves=体育，音乐，电影
Memo= 你们好！ 在哪儿能看到免费电影？
<HTML> <BODY> <FONT face="华文楷体" color="#990033" SIZE=5> <CENTER><% =name&appellation&" ： 欢迎您!" %><br> <p>您是<%=city%>人<br> </CENTER> <p>您喜欢的是： <UL><%=loves%></UL> 您的留言是：<br> <p><%=Memo%> </FONT> </BODY> </HTML>
id 属性相同
<label for="man">男</label>
<input
type=radio name=sex value=男 id="man">
表单元素标记
5、多行文本框 <textarea name=“多行文本框名称” cols=“每行中的字符数” rows=“显示的行数”> 初始内容 </textarea>
径" />
9、隐藏域
<input name=“名称” type=“hidden” value=“提交
值”/>
<fieldset></fieldset>标记用于为表单内容分组，它 有一个配套标记<legend></legend>,用于为各个表
单组定义名称。
总结
所有的表单元素，必须放在<form></form>标记中 <form action=“URL” method=“表单的提交方式
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" />
2. 重置按钮 <input type="reset" value="" />
3. 普通按钮 <input type="button" value="" />
4. 图片按钮 <input type="image" src="" />
注意：图片按钮的功能相当于提交按钮
<p>留言： <p><textarea name="Memo" rows="4" cols="60"></textarea> <p><input type="submit" value="提交"> <input type="reset" value="清空">