那些酷炫的网页你也可以做到——第六篇(表单标签)

简介: 那些酷炫的网页你也可以做到——第六篇(表单标签)

表单标签


我们每天都在使用QQ,那你知道QQ这个登录界面是怎么实现的吗?今天就教你做一个登录界面。

image.png

表单标签:
<form></form> :封装表单标签的范围
action:action属性。表示表单要提交的地址(提交到后台,servlet)。
method:method属性。表示表单提交方式,有get和post两种属性


get和post的区别:

1、get方式进行提交时,参数列表内容以明文形式显示到地址栏上。

post方式提交时,封装到请求体中,(请求体属于http协议部分的内容),不会显示在地址栏中。这种方式比较安全

2、get方式提交时,安全级别比较低。

post方式提交,安全级别比较高。

3、get方式提交时,对参数列表的数据大小有限制。地址栏大小是一定的。默认是1KB。

post方式提交时, 对大数据没有限制。支持大数据的传输。


<input> :用户输入项的内容
属性:1.name  名称(必须指定)
2.value  值
type:属性值的不同,显示不同的输入框
例如: type="text"  :普通的文本框
    type="password" :密码框,非明文的


普通文本框一般就是我们的用户名,用户名输入的时候别人是可以看到的,我们的密码一般不会让别人看见,所以密码的输入框选择非明文的,保护我们的隐私。

image.png

type="radio"  :单选按钮。
checked:默认值。只要在radio上出现了checked属性,就默认是被选中的。
type="checkbox" :多选按钮
type="file":文件上传
type="hidden" :隐藏组件。用户不需要看不到的数据,使用该该组件隐藏起来。
type="button" :按钮
type="submit" :提交。默认显示“提交查询”。
表单收集用户数据,点击后就可以把表单数据提交到后台。
type="reset"  :重置。默认显示“重置”。恢复到最初的状态。


单选按钮就比如在性别的选择上你只能选择男性或者女性,多选按钮就用在兴趣爱好,你可以爱好篮球也可以爱好游戏。


image.png

文件的上传就例如我们平时用的各种软件中的文件上传。

image.png

<select></select>  :选择下拉框。
name  :name属性必须指定,并且指定在select标签上。
<option></option> value  :value属性必须指定,并且指定在option标签上
 selected :默认值属性。例如:selected="selected"
<textarea></textarea>:文本域。可以写入多行多列的内容
    rows:行数。
    cols:列数。


选择下拉框就像图中的样子,可以选择不同的城市,文本域就好比是我们平时填写调查问卷最后的那部分主观问题,需要你自己填上文字。


image.png

下面看一个完整的实例,具体的了解一下上面的知识点


<body><formaction="http://localhost:8080/UITEXT/servlet/Success"method="get">  用户名:<inputtype="text"name=""value=""/><br/>  密码:<inputtype="password"name="password"value=""/><br/>  性别:<inputtype="radio"name="sex"value="nan"/><inputtype="radio"name="sex"value="nv"/><br/>         爱好:<inputtype="checkbox"name="love"value="lq"/>篮球
<inputtype="checkbox"name="love"value="sj"/>睡觉
<inputtype="checkbox"name="love"value="yx"checked="checked"/>游戏 <br/><inputtype="file"name="myfile"/><br/>          居住地: <selectname="city"><optionvalue="none">--请选择--</option><optionvalue="bj"selected="selected">北京</option><optionvalue="sh">上海</option><optionvalue="gz">广州</option><optionvalue="hb">河北</option><optionvalue="tj">天津</option></select><br/><textarearows="10"cols="10"></textarea><br/><inputtype="button"value="按钮"/><inputtype="submit"value="注册"/><inputtype="reset"/></form></body>


运行结果:

image.png

学完了今天的知识,是不感觉做出来的网页更有成就感了,不要放弃,继续学习,做更好的自己。


目录
相关文章
|
5月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
143 1
|
4月前
|
前端开发
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
|
6月前
|
移动开发 HTML5
超级高大上HTML5引导页源码 动态效果更好看
超级高大上HTML5引导页源码 动态效果更好看
246 3
超级高大上HTML5引导页源码 动态效果更好看
|
6月前
如何利用 HBuilderX 制作图文混排的网页
如何利用 HBuilderX 制作图文混排的网页
269 3
|
6月前
|
移动开发 HTML5
高大上HTML5引导页源码 动态效果更好看
高大上HTML5引导页源码 动态效果更好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
74 0
高大上HTML5引导页源码 动态效果更好看
|
移动开发 前端开发 JavaScript
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
那些酷炫的网页你也可以做到——第五篇(表格标签)
那些酷炫的网页你也可以做到——第五篇(表格标签)
148 0
那些酷炫的网页你也可以做到——第五篇(表格标签)
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
154 0
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
139 0
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
|
Web App开发 移动开发 前端开发
【赞】H5作品项目案例、仿微信聊天HTML5页面源码
HTML5+css3开发的微信手机聊天功能,可以发表情、有红包、打赏、霸屏弹窗功能,还可以长按删除操作! ===主张原创设计,拒绝数量、追求质量! ===独特的设计风格,体现企业品牌文化。
11925 0