您好,欢迎访问三七文档
1、HTML表单学习HTMLinput标签input标签用于搜集用户信息。根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。HTML表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(form)定义。输入多数情况下被用到的表单标签是输入标签(input)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:1.文本域(TextFields)当用户要在表单中键入字母、数字等内容时,就会用到文本域。formFirstname:inputtype=textname=firstnamebrLastname:inputtype=textname=lastname/form浏览器显示如下:注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。2.单选按钮(RadioButtons)当用户从若干给定的的选择中选取其一时,就会用到单选框。forminputtype=radioname=sexvalue=maleMaleinputtype=radioname=sexvalue=femaleFemale/form3.复选框(Checkboxes)当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。forminputtype=checkboxname=bikeIhaveabikebrinputtype=checkboxname=carIhaveacar/form4.表单的动作属性(Action)和确认按钮当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。formname=inputaction=html_form_action.aspmethod=getUsername:inputtype=textname=userinputtype=submitvalue=Submit/form浏览器显示如下:假如你再上面的文本框内键入几个字母,并且点击确认按钮,那么输入数据会被传送到名为html_form_action.asp的页面。那一页将显示出输入的结果。练习代码:htmlheadTITLECGI1:helloCGI/TITLE/head/bodyformaction==geth2文本域/h2brFirstname:inputtype=textname=fname/Lastname:inputtype=textname=lname/inputtype=submitvalue=Submit/h2单选按钮(RadioButtons)/h2brinputtype=radioname=sexvalue=maleMaleinputtype=radioname=sexvalue=femaleFemaleh2复选框(Checkboxes)/h2brinputtype=checkboxname=bikeIhaveabikebrinputtype=checkboxname=carIhaveacarbrh2确认按钮/h2brinputtype=submitvalue=Submit/form/body/html效果图:2、简单练习效果:点击确定按钮,调用CGI程序,实现CGI的调用。htmlheadtitleCGI:Test/title/headbodyformaction=/cgi-bin/demo1.cgip这是一个CGI的Test程序/pinputtype=submitvalue=确定/form/body/html分析:HTML语言是一种描述性语言。html代码被包含在html/html之间。headtitleCGI:Test/title/head这里是一个标题头。如:这里是正文部分:bodyformaction=/cgi-bin/demo1.cgip这是一个CGI的Test程序/pinputtype=submitvalue=确定/form/body正文部分就只有一个表单。action部分表示,点击确定按钮后,他会调用/cgi-bin/demo1.cgi程序。这里没有给表单指定类型。inputtype=submitvalue=确定创建一个按钮。下面我们看一下。CGI部分的C代码:#includestdio.h#includestdlib.hintmain(void){printf(%s\r\n\r\n,Content-Type:text/html);printf(html\nTITLECGI1:CGIhello!/TITLE\n);printf(centerH1hello,thisisfristCGIdemo!/H1/center\n/html);return0;}很简单。就是3个printf。这里的printf不会打印到服务器上,它已经做了重定向。指向了。浏览器.当我们点击HTML页面上的确定按钮时就会调用这个CGI程序.这段代码由GCC编译.点击后就会跳出一个页面.我们来看看这个页面的原代码再和这个C语言程序进行比较.htmlTITLECGI1:CGIhello!/TITLEcenterH1hello,thisisfristCGIdemo!/H1/center/html现象说明:除开第一个printf其他的都是原样输出了.就是说在我们的C语言程序中够成一个HTML页面代码.本实验测试通过.注意:编译好的CGI程序是放在服务器上的.加法计算现象:在表单中输入两个数据.调用CGI返回两个数据相加的和.下面我们看一下:htm部分代码htmlheadtitleCGI:Testadd/title/headbodyformaction=/cgi-bin/demo2.cgiph1请输入两个数据:inputtype=textname=msize=5+inputtype=textname=nsize=5brinputtype=submitvalue=确定/h1/p/formbody/html要点:inputtype=textname=msize=5这里是设定input类型为文本域,变量名为m,size=5表示文本域的显示宽度为5,太长就不美观了.界面如下:CGI程序:#includestdio.h#includestdlib.hintmain(void){char*data;inta=0,b=0;data=getenv(QUERY_STRING);printf(%s\r\n\r\n,Content-Type:text/html);printf(html\nTITLECGI2:相加结果/TITLEbr\n);sscanf(data,m=%d&n=%d,&a,&b);printf(H1相加结果为:%d/H1,a+b);return0;}要点:1.data=getenv(QUERY_STRING);通过getenv函数获得环境变量的指针.2.sscanf(data,m=%d&n=%d,&a,&b);格式化字符串输入.下面,看一下我们点击确定按钮后,浏览器的地址发生了什么变化.=4&n=5这里的m=4&n=5和sscanf中形式是一样的.他就是QUERY_STRING环境变量中的值.所以,我们在html代码中的,m,n的位置不能弄反,否则不会出现现象.注意:1.CGI和HTML沟通是通过环境变量来实现的.所以只要能获得环境变量的语言都可以用来写CGI程序.4、登陆窗口目的:写一个登录窗口,输入帐号和密码,正确时返回成功.不正确时返回失败.下面看下html代码:htmlheadTITLECGI3:登录/TITLE/head/bodyFORMACTION=/cgi-bin/demo3.cgiMETHOD=POSTP用户名:INPUTNAME=nameBRP用户名:INPUTTYPE=passwordNAME=passwordBRINPUTTYPE=SUBMITVALUE=确定/FORM/body/html注意:1.P用户名:INPUTTYPE=passwordNAME=passwordBR这句表示文字域是用来输入密码的.在其中输入的内容用以点表示.2.表单的方式是POST.效果如图:下面看下.CGI部分代码:#includestdio.h#includestdlib.hintmain(void){char*str_len=NULL;//定义字符型指针intlen=0;charbuf[100]=;charuser[20]=;charpasswd[20]=;printf(%s\r\n\r\n,Content-Type:text/html);//CGI标准头printf(html\nTITLECGI3:登录结果/TITLEbr\n);str_len=getenv(CONTENT_LENGTH);//获取输入字符长度//如果str_len没有赋值成功,如果str_len有多过数值,如果len大于80则打印出错if((str_len==NULL)||(sscanf(str_len,%d,&len)!=1)||(len80))printf(sorry!error!);fgets(buf,len+1,stdin);//从标准输入中读取len个字符sscanf(buf,name=%[^&]&password=%s,user,passwd);//格式化输入获得登陆名和密码if((strncmp(user,wenhao,6)==0)&&(strncmp(passwd,111111,6)==0))printf(bodyh1Welcome!登录成功!/h1/body/html);elseprintf(bodyh1Sorry!用户名或密码错误!/h1/body/html);return0;}5、穿插HTML,CSS零星知识今天,看了同学写的HTML代码很糟糕.就自己重写了一下.了解了一些HTML.CSS知识.现记录在这里.先给大家一个比较好的CSS教程网站:概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一要加入CSS.需要如下写:styletype=text/cssbody{background-image:url(sercer.files/smarthome.jpg);background-repeat:repeat-x;background-repeat:repeat-y;background-position:center;}/style上面CSS的功能是设置一个背景图片并将它放在
本文标题:CGI编程学习
链接地址:https://www.777doc.com/doc-4894245 .html