CGI编程---html表单

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"的页面。但是此处并未实现此asp故不再进行展示

练习代码:

<html>
    
    <head>
        <TITLE>CGI1:hello CGI</TITLE>
    </head>
    
    </body>    


        <form action="www.baidu.com" 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>

浏览器显示如下:


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值