红客团队html引导,HTML语言--百度红客吧系列专题课程--23-程序员宅基地

技术标签: 红客团队html引导  

作者:三月十三

第23节、使用表单

今天继续,开始说表单的实现,先说一下什么是表单,来看个图吧:

a4c26d1e5885305701be709a3d33442f.png

我这个图是截的free258的注册页面的图,这就是一个表单,我们在表单里输入相关的信息,然后点击最下面的“注册”按钮,这样我们所填写的信息就通过post或get方式传送给了网站的数据库,这样网站的管理人员就有了我们的注册资料。

那么,表单就是一种用来收集站点访问者信息的一种手段,当我们填完表单后,我们点击“注册”或“提交”按钮,这样我们所填的信息就被送出了,这时候,网站管理人员事先设定好的处理我们提交的信息的程序就会启动,以各种不同的方式处理这些数据。

那么,在HTML中,表单标记为form,基本语法格式如下:

action="字符串">

... ...

我们来介绍一下form标记的属性:

1.

name属性:我们使用这个属性指定表单的名字,以便在后面使用脚本的时候调用该表单,不然没有名字的话,脚本不认识它。

2.

method属性:指定传送数据的方式,该属性可以有两个值,get和post,其中get的意思是直接将表单数据附加到请求该页的URL后,从而传送到服务器上,post的意思是在HTTP请求中嵌入表单数据,再传送。

需要注意的是,使用get方式时应保证表单的数据不超过8192个字节,若超过了8192个字节,那么表单中的数据将被截断,从而造成数据处理失败,另外,如果表单中传送的是用户名和密码等重要信息的话,不要使用get方法,而应该使用更安全的post方法,所以,当我们指定表单数据的传送方式时,最好用post方法。

3.

action属性:指定将要接收表单数据的服务器端程序或该程序的URL地址。

4.

onsubmit属性:指定提交表单时要调用的事件处理程序

5.

onreset属性:指定重置表单时要调用的事件处理程序

6.

target属性:指定一个目标窗口,其取值如下:

_blank:在未命名的窗口中打开目标文档

_parent:在显示当前文档的窗口的父窗口中打开目标文档

_self:在提交表单所使用的窗口中打开目标文档

_top:在当前窗口中打开目标文档,并确保目标文档占用整个窗口

在一个网页中可以包含多个表单,在每个表单里都可以包含各种控件、文本框、复选框、下拉选单、按钮等内容,但,需要记住的是,表单是不能嵌套的。

OK,下面我们先来说如何使用输入型表单控件:

在HTML中,我们使用input标记来创建各种输入型表单控件,通过将input标记的type属性设置为不同的值,可以创建不同类型的输入型表单控件,包括单行文本框、密码框、复选框、单选按钮、文件域、按钮等。

下面我们来说一下使用单行文本框的方法。

将input的type属性设为text,即在网页中插入了一个单行文本输入框。

基本语法为:

name="txt-1" value="字符串" size="整数"

maxlength="整数">

其中,name属性指定该单行文本框的名字,指定名字是为了我们以后使用脚本处理表单中的数据的时候用,value属性指定单行文本框的初始值,即在用户未输入任何内容时文本框里显示的内容,size属性指定单行文本框的宽度,maclength属性指定单行文本框内可输入的最大字符数。

OK,这东西不难的,那么下面我们就再来说一个,使用密码输入框。

朋友们应该有过体会,就是我们在注册账户或登录账户的时候,我们输进去的密码显示的是星号(*)或者实心圆点(●),我们现在就来讨论一下这些技术的实现方法:

使用密码输入框的方法跟使用单行文本框的方法差不多,只是input的type值由text变成了password,即基本语法为:

name="pass-1" value="字符串" size="整数"

maxlength="整数">

这里name属性与单行文本框的名字的作用一样,value和size、maxlength都一样。

好,密码输入框我们也说过了,不要着急,上面两个输入框使用的方法大致上是一样的,那么,我们就再来说一个不同的,不过这个不同也只是一点点的不同罢了,那就是----使用按钮。

我们在注册或者登录的时候经常会用到各种各样的按钮,比如确定、重写、提交、注册等等按钮,这些按钮的实现方法就是将input的type属性设置为不同值来实现的。

在HTML里,我们可以使用input的type值设为submit(提交按钮),reset(重置按钮)和button(自定义按钮)。

创建按钮的基本语法为:

type="submit|reset|button" name="字符串" value="字符串"

οnclick="过程"

其中type可取的值有:

1.

submit:创建一个提交按钮,当用户将表单中的需要填的东西填完了之后,点击此按钮提交填写好的数据,当我们点击了提交按钮之后,表单中的(包括提交按钮的名字和值)以ASCII文本格式传送给由表单中指定的表单处理程序来处理。

一般情况下,每个表单都是有提交按钮的。

2.

reset:创建一个重置按钮,在输入表单时如果我们输入错误的地方有很多或者填完以后发现没有表达自己的意思的话,我们可以使用重置按钮,这个按钮的作用就是清空表单中已被填写或选择的项目,将表单还原到初始状态。

3.

button:创建一个自定义按钮,这样的按钮被创建以后,我们必须为其指定一个专门的按钮处理程序,也就是必须为其指定一个处理脚本。

4.

name:指定按钮的名称,注意,这个是按钮的名字,不是在按钮上显示的文字。

5.

value:指定在按钮上显示的文字,比如设为“提交”。

另外,值得一提的是,除了上述属性之外,按钮控件还支持onclick事件,onclick事件就是鼠标单击事件,就是当我们单击了这个按钮的时候按钮可以作出相应的反应。

OK,下面我们来写一段代码,使用我们上边学习的内容来创建一个简单的表单。

例27(22.html):

百度红客吧原创课程----创建一个基本表单

width="368">

bgcolor="teal">

align="center">

color="white">

登录表单

width="113" height="50">

用户名:

height="50">

name="t-1" size="20" maxlength="12">

width="113" height="50">

密码:

height="50">

name="pwd-1" size="20"

align="center">

align="right" height="50">

name="sub-1" value="确定">

height="50">

name="reset-1" value="重写">

我们来看一下执行效果吧:

这是网页刚打开的时候:

a4c26d1e5885305701be709a3d33442f.png

这是我填写了一些内容之后:

a4c26d1e5885305701be709a3d33442f.png

可以看到,在密码的输入栏里显示的是星号,这样安全系数就进一步增强了。

点击重写按钮则清空所有已填写的内容,恢复表单的初始状态,当然,在这里我点击确定也是没有用的,因为我没有对

标记指定处理它提交的内容的程序,我们会在接下来的课程中一步一步讲到。

好了,今天就说这么多吧,我们明天见!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_28979369/article/details/117820723

智能推荐

Eclipse中配置WebMagic(已配置好Maven)_使用eclipse搭建webmagic工程-程序员宅基地

文章浏览阅读364次。1.WebMagicWebMagic是一个简单灵活的Java爬虫框架。基于WebMagic,你可以快速开发出一个高效、易维护的爬虫。2.在Eclipse中配置WebMagic1.首先需要下载WebMagic的压缩包官网地址为:WebMagic官网最新版本为:WebMagic-0.7.3,找到对应版本,打开下载界面,注意,下载要选择Source code(zip)版本,随便下载到哪里都可以;2.下载好的压缩包需要解压,此时解压到的位置即为后续新建的Eclipse的project位置,比如我的Ecli_使用eclipse搭建webmagic工程

linux启动mysql_linux如何启动mysql服务_linux启动mysql服务命令是什么-系统城-程序员宅基地

文章浏览阅读1.9k次。mysql数据库是一种开放源代码的关系型数据库管理系统,有很多朋友都在使用。一些在linux系统上安装了mysql数据库的朋友,却不知道该如何对mysql数据库进行配置。那么linux该如何启动mysql服务呢?接下来小编就给大家带来linux启动mysql服务的命令教程。具体步骤如下:1、首先,我们需要修改mysql的配置文件,一般文件存放在/etc下面,文件名为my.cnf。2、对于mysql..._linux中 mysql 启动服务命令

php实现在线oj,详解OJ(Online Judge)中PHP代码的提交方法及要点-程序员宅基地

文章浏览阅读537次。详解OJ(Online Judge)中PHP代码的提交方法及要点Introduction of How to submit PHP code to Online Judge SystemsIntroduction of How to commit submission in PHP to Online Judge Systems在目前常用的在线oj中,codeforces、spoj、uva、zoj..._while(fscanf(stdin, "%d %d", $a, $b) == 2)

java快捷键调字体_设置MyEclipse编码、补全快捷键、字体大小-程序员宅基地

文章浏览阅读534次。一、设置MyEclipse编码(1)修改工作空间的编码方式:Window-->Preferences-->General-->Workspace-->Text file encoding(2)修改一类文件的编码方式:Window-->Preferences-->General-->content Types-->修改default Encoding(..._java修改快捷缩写内容

解析蓝牙原理_蓝牙原理图详解-程序员宅基地

文章浏览阅读1.4w次,点赞19次,收藏76次。1.前言市面上关于Android的技术书籍很多,几乎每本书也都会涉及到蓝牙开发,但均是上层应用级别的,而且篇幅也普遍短小。对于手机行业的开发者,要进行蓝牙模块的维护,就必须从Android系统底层,至少框架层开始,了解蓝牙的结构和代码实现原理。这方面的文档、网上的各个论坛的相关资料却少之又少。分析原因,大概因为虽然蓝牙协议是完整的,但是并没有具体的实现。蓝牙芯片公司只负责提供最底层的API_蓝牙原理图详解

从未在一起更让人遗憾_“从未在一起和最终没有在一起哪个更遗憾”-程序员宅基地

文章浏览阅读7.7k次。图/源于网络文/曲尚菇凉1.今天早上出门去逛街,在那家冰雪融城店里等待冰淇淋的时候,听到旁边两个女生在讨论很久之前的一期《奇葩说》。那期节目主持人给的辩论题是“从未在一起和最终没有在一起哪个更遗憾”,旁边其中一个女生说,她记得当时印象最深的是有个女孩子说了这样一句话。她说:“如果我喜欢一个人呢,我就从第一眼到最后一眼,把这个人爱够,把我的感觉用光,我只希望那些年让我成长的人是他,之后的那些年他喝过..._从未在一起更遗憾

随便推点

Spring Cloud Alibaba 介绍_sprngcloud alba-程序员宅基地

文章浏览阅读175次。Spring Cloud Alibaba 介绍Sping体系Spring 以 Bean(对象) 为中心,提供 IOC、AOP 等功能。Spring Boot 以 Application(应用) 为中心,提供自动配置、监控等功能。Spring Cloud 以 Service(服务) 为中心,提供服务的注册与发现、服务的调用与负载均衡等功能。Sping Cloud介绍官方介绍​ Tools for building common patterns in distributed systems_sprngcloud alba

测试 数据类型的一些测试点和经验_基础字段的测试点-程序员宅基地

文章浏览阅读3.2k次,点赞4次,收藏21次。我这里是根据之前在测试数据类项目过程中的一些总结经验和掉过个坑,记录一下,可以给其他人做个参考,没什么高深的东西,但是如果不注意这些细节点,后期也许会陷入无尽的扯皮当中。1 需求实现的准确度根据产品需求文档描述发现不明确不详细的或者存在歧义的地方一定要确认,例如数据表中的一些字段,与开发和产品确认一遍,如有第三方相关的,要和第三方确认,数据类项目需要的是细心,哪怕数据库中的一个字段如果没有提前对清楚,后期再重新补充,会投入更大的精力。2 数据的合理性根据业务场景/常识推理,提..._基础字段的测试点

一文看懂:行业分析怎么做?_码工小熊-程序员宅基地

文章浏览阅读491次。大家好,我是爱学习的小xiong熊妹。在工作和面试中,很多小伙伴会遇到“对XX行业进行分析”的要求。一听“行业分析”四个字,好多人会觉得特别高大上,不知道该怎么做。今天给大家一个懒人攻略,小伙伴们可以快速上手哦。一、什么是行业?在做数据分析的时候,“行业”两个字,一般指的是:围绕一个商品,从生产到销售相关的全部企业。以化妆品为例,站在消费者角度,就是简简单单的从商店里买了一支唇膏回去。可站在行业角度,从生产到销售,有相当多的企业在参与工作(如下图)在行业中,每个企业常常扮._码工小熊

LLaMA 简介:一个基础的、650 亿参数的大型语言模型_llma-程序员宅基地

文章浏览阅读1.6w次,点赞2次,收藏2次。还需要做更多的研究来解决大型语言模型中的偏见、有毒评论和幻觉的风险。我们在数万亿个令牌上训练我们的模型,并表明可以仅使用公开可用的数据集来训练最先进的模型,而无需诉诸专有和不可访问的数据集。在大型语言模型空间中训练像 LLaMA 这样的小型基础模型是可取的,因为它需要更少的计算能力和资源来测试新方法、验证他人的工作和探索新的用例。作为 Meta 对开放科学承诺的一部分,今天我们公开发布 LLaMA(大型语言模型元 AI),这是一种最先进的基础大型语言模型,旨在帮助研究人员推进他们在 AI 子领域的工作。_llma

强化学习在制造业领域的应用:智能制造的未来-程序员宅基地

文章浏览阅读223次,点赞3次,收藏5次。1.背景介绍制造业是国家经济发展的重要引擎,其产能和质量对于国家经济的稳定和发展具有重要意义。随着工业技术的不断发展,制造业的生产方式也不断发生变化。传统的制造业通常依赖于人工操作和手工艺,这种方式的缺点是低效率、低产量和不稳定的质量。随着信息化、智能化和网络化等新技术的出现,制造业开始向智能制造迈出了第一步。智能制造的核心是通过大数据、人工智能、计算机视觉等技术,实现制造过程的智能化、自动化...

ansible--安装与使用_pip安装ansible-程序员宅基地

文章浏览阅读938次。系列文章目录文章目录系列文章目录 前言 一、ansible是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言菜鸟一只,刚开始使用,仅作以后参考使用。边学习,边记录,介绍一下最基础的使用,可能会有理解不到位的地方,可以共同交流,废话不多说,走起。一、ansible 简介?ansible是自动化运维工具的一种,基于Python开发,可以实现批量系统配置,批量程序部署,批量运行命令,ansible是基于模块工作的,它本身没有批量部署的能力,真正.._pip安装ansible

推荐文章

热门文章

相关标签