那些酷炫的网页你也可以做到——第六篇(表单标签)-阿里云开发者社区

开发者社区> 静Yu> 正文

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

简介: 那些酷炫的网页你也可以做到——第六篇(表单标签)
+关注继续查看

表单标签


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


运行结果:

image.png

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13893 0
Java Web简明教程–网页篇[3]–继续基本标签
Java Web简明教程–网页篇[3]–继续基本标签
14 0
JavaScript 获取整个网页的完整内容,包括 html 标签。
JavaScript 获取整个网页的完整内容,包括 html 标签。
61 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11893 0
Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页
一、背景   在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移动端网页在用户双击屏幕时会变大,导致整个页面的布局错误,非常 影响最终效果,下面介绍一种通过html的meta标签来阻止该现象发生的办法。
895 0
标签之美八——网页框架
标签之美八——网页框架
13 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22408 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
91
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载