帮助
|
留言交流
|
首 页
阅览室
馆友
我的图书馆
来自:
启智职教的店
>
馆藏分类
配色:
字号:
大
中
小
HTML+CSS基础-第五章
2021-01-09 | 阅:
转:
|
分享
LOGO第五章与浏览者交互,表单标签封面页第<#>页LOGO目录第一节使用表单标签,与用户交互第二节文本输入框,密码输入框第三节文本域,支持
多行文本输入第四节使用单选框、复选框,让用户选择第五节使用下拉列表框,节省空间第六节使用下拉列表框进行多选第七节使用提交按钮,提交
数据第八节使用重置按钮,重置表单信息第九节Form表单中的label标签目录页第<#>页LOGO使用表单标签,与用户交互第一节网站
怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单
传过来的数据。正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOGO第一节使用表单标签,与用户交互method?:
?数据传送的方式(get/post)。
or="username">用户名:
密码:
/>1.
:
标签是成对出现的,以
开始,以
结束。2.action?:
浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。语法:
="服务器文件">正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO注意所有表单控件(文本框、文本域、按钮、单选框
、复选框等)都必须放在
标签之间(否则用户输入的信息提交不到服务器上哦!)。查看index.html
文档(第五章)正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO第二节文本输入框,密码输入框语法:
<
inputtype="text/password"name="名称"value="文本"/>
1、type:
?当type="text"时,输入框为文本输入框;?当type="password"时,?输入框为密码输入框。2、name:为文本
框命名,以备后台程序ASP、PHP使用。3、value:为文本输入框设置默认值。(一般起到提示作用)正文第几章这里输入本章标题第
<#>页第几节这里输入本节标题LOGO举例
姓名:
密码:
查看index1.htm
l文档(第五章)正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO第三节文本域,支持多行文本输入语法:
arearows="行数"cols="列数">文本1、
标签是成对出现的,以
area>开始,以
结束。2、cols:多行输入域的列数。3、rows:多行输入域的行数。4、在
area>标签之间可以输入默认值。正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO举例
ormmethod="post“action="save.php">
联系我们
areacols="50"rows="10">在这里输入内容...查看index2.ht
ml文档(第五章)正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO使用单选框、复选框,让用户选择第四节在使用表
单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用
户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOGO使
用单选框、复选框,让用户选择第四节语法:
名称"checked="checked"/>1、type:当?type="radio"?时,控件为单选框当?type="ch
eckbox"?时,控件为复选框2、value:提交数据到服务器的值(后台程序PHP使用)3、name:为控件命名,以备后台程序
ASP、PHP使用4、checked:当设置checked="checked"时,该选项被默认选中正文第几章这里输入本章标题
第<#>页第几节这里输入本节标题LOGO使用单选框、复选框,让用户选择举例正文第几章这里输入本章标题第<#>页第几节这里输入本节标
题LOGO使用单选框、复选框,让用户选择举例注意:同一组的单选按钮,name取值一定要一致,比如上面例子为同一个名称“radio
Love”,这样同一组的单选按钮才可以起到单选的作用。查看index3.html文档(第五章)正文第几章这里输入本章标题第<#>
页第几节这里输入本节标题LOGO第五节使用下拉列表框,节省空间正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOG
O注意
选项提交值:向服务器提交的值选项:显示的值selected="se
lected":设置selected="selected"属性,则该选项就被默认选中。查看index.html文档(第五章)正文
第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO第五节使用下拉列表框,节省空间查看index4.html文档(第五
章)正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOGO使用下拉列表框进行多选第六节下拉列表也可以进行多选操作,
在
标签中设置multiple="multiple"属性,就可以实现多选功能,在windows操作系统下,进行多
选时按下Ctrl键同时进行单击(在Mac下使用?Command?+单击),可以选择多个选项。正文第几章这章的题目是什么呢第<#>
页第几节这节的题目是什么呢LOGO使用下拉列表框进行多选第六节正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOG
O使用下拉列表框进行多选第六节正文第几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOGO使用提交按钮,提交数据第七节语
法:
type:只有当type值设置为submit时,按钮才有提交作
用value:按钮上显示的文字正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO使用提交按钮,提交数据第七节正文第
几章这章的题目是什么呢第<#>页第几节这节的题目是什么呢LOGO第八节使用重置按钮,重置表单信息当用户需要重置表单信息到初始时的状
态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法:
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO举例使用重置按钮,重置表单信息正文第
几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO举例使用重置按钮,重置表单信息查看index5.html文档(第五章
)正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO第八节Form表单中的label标签label标签不会向用户呈
现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在label标签内点击文本,就会触发此控件。就是说,当用户单击选中该l
abel标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法:
lfor="控件id名称">注意:标签的for属性中的值应当与相关控件的id属性值一定要相同。正文第几章这里输入本章标题
第<#>页第几节这里输入本节标题LOGO举例
男
type="radio"name="gender"id="male"/>
e">女
belfor="email">输入你的邮箱地址
placeholder="Enteremail">
查看index6.html文档(第五章)正文第几章这里输入本章
标题第<#>页第几节这里输入本节标题LOGO举例
男
ttype="radio"name="gender"id="male"/>
ale">女
<
labelfor="email">输入你的邮箱地址
"placeholder="Enteremail">
查看index6.html文档(第五章)正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO任务要求:慢跑、登山和篮球复选框要与各自的复选项用for属性关联。效果图如下:查看index7.html文档(第五章)正文第几章这里输入本章标题第<#>页第几节这里输入本节标题LOGO谢谢聆听!封面页第<#>页封面目录图表图片图片图片图片图片图片图表图片图片图片图表图片图表图表图表图表图片图表图片图片图片图片图片图片图片封底
献花(
0
)
+1
(本文系
启智职教的...
原创
)
类似文章
更多
Word批量给大标题前面加“第几章”
页眉页脚的制作--Word论文排版技巧(五)
WORD2016目录自动生成方法
插入目录和在页眉插入各章标题的简便方法
搞定你身边的人(人际关系宝典)
Excel应用——Index与下拉框
Word 2007书籍排版
中国风格(46)
微博正文
发表评论: