1、HTML表单学习
HTML <input> 标签
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
HTML 表单用于搜集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
输入
多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
1.文本域(Text Fields)
当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
浏览器显示如下:
注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。
2.单选按钮(Radio Buttons)
当用户从若干给定的的选择中选取其一时,就会用到单选框。
<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>
3.复选框(Checkboxes)
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
4.表单的动作属性(Action)和确认按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>浏览器显示如下:
假如你再上面的文本框内键入几个字母,并且点击确认按钮,那么输入数据会被传送到名为"html_form_action.asp"的页面。那一页将显示出输入的结果。
练习代码:
<html>
   
    <head>
        <TITLE>CGI1:hello CGI</TITLE>
    </head>
   
    </body>   
        <form action="www.baidu" method="get">
        <h2>文本域</h2><br>
        First name: <input type="text" name="fname" />
        Last name:  <input type="text" name="lname" />
                    <input type="submit" value="Submit" />
        <h2>单选按钮(Radio Buttons)</h2><br>
                    <input type="radio" name="sex" value="male"> Male
                    <input type="radio" name="sex" value="female"> Female
        <h2>复选框(Checkboxes)</h2><br>           
                    <input type="checkbox" name="bike">I have a bike<br>
                    <input type="checkbox" name="car">I have a car<br>
        <h2>确认按钮</h2><br>           
                    <input type="submit" value="Submit">
        </form>
   
    </body>
   
</html>
效果图:
2、简单练习
效果:
点击确定按钮,调用CGI程序,实现CGI的调用。
<html>
    <head>
        <title>CGI:Test</title>
    </head>
   
    <body>
   
        <form action="/i">
        <p>这是一个CGI的Test程序</p>
        <input type="submit" value="确定">   
        </form>
       
    </body>
</html>
分析:
HTML语言是一种描述性语言。html代码被包含在<html></html>之间。
<head>
<title>CGI:Test</title>
</head>
这里是一个标题头。如:
这里是正文部分:
<body>
<form action="/i">
<p>这是一个CGI的Test程序</p>
<input type="submit" value="确定">
</form>
</body>
正文部分就只有一个表单。
action部分表示,点击确定按钮后,他会调用/i程序。这里没有给表单指定类型。
<input type="submit" value="确定">
html input type属性创建一个按钮。
下面我们看一下。CGI部分的C代码:
#include <stdio.h>
#include <stdlib.h>
int main(void)
{
    printf("%s\r\n\r\n","Content-Type:text/html");
    printf("<html>\n<TITLE>CGI1:CGI hello!</TITLE>\n");
    printf("<center><H1>hello, this is frist CGI demo!</H1></center>\n</html>");
    return 0;
}
很简单。就是3个printf。
这里的printf不会打印到服务器上,它已经做了重定向。指向了。浏览器.
当我们点击HTML页面上的"确定"按钮时就会调用这个CGI程序.这段代码由GCC编译.
点击后就会跳出一个页面.我们来看看这个页面的原代码再和这个C语言程序进行比较.
<html>
<TITLE>CGI1:CGI hello!</TITLE>
<center><H1>hello, this is frist CGI demo!</H1></center>
</html>
现象说明:
除开第一个printf其他的都是原样输出了.
就是说在我们的C语言程序中够成一个HTML页面代码.
本实验测试通过.
注意:编译好的CGI程序是放在服务器上的.
加法计算
现象:
在表单中输入两个数据.调用CGI返回两个数据相加的和.
下面我们看一下:htm部分代码
<html>
    <head>
        <title>CGI:Test add</title>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。