什么是表单-表单组成-表单原理-表单实例-表单实例解析

什么表单:

组成:

  一个表单有三个基本组成部分:
1) 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
2) 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
3) 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

作用:

  表单主要负责在网页中数据采集。

我是这样理解的:

  表单,就是自己家里贴着各种标签的调料盒,里面根据对应的标签放满了对应的调料。等某一天邻居找我借“盐”的时候,我就直接把整个调料盒递给他,说“你随便用”。

工作原理:

  当我们点击了提交按钮后,表单中所填的数据会被打包发送到服务器进行处理,接着服务器会根据表单中的信息返回特定的响应。
  在表单中,我们可以输入的元素大致可以分成两种:输入赋值和选择赋值。虽然有两种,但是其最终结果却是一样的。都是先为一个变量赋值,然后后将此变量传到服务器进行处理。

type="text" name="test_name" value="165">

  上面的实例中,test_name就是一个变量名,test_name的初始值就是value=“165”,当我们删除输入框中的初始值,然后写入新值的时候比如777,test_name的值变成了777,提交表单的时候,就会将变量test_name和其新赋值提交到服务器等。

type="radio" name="test_radio" value="not">
type="radio" name=" test_radio" value="yes">

  虽然是两行代码,但是这两个单选框为一组,只能选择一个。两个选项都是为 test_radio赋值,所赋值即每个选项 value 的值。表单提交时同样会提交变量 test_radio及它的 value.

实例:

  下面我们一个简单的实例来运行并解释一下:

<html>
   <head>
    <title>表单的例子title>
   head>
   <body>
    <form action="http://www.baidu.com" method="post" target="_blank">
        用  户  名:<input type="text" name="username" value="今天天气很好" size="20" maxlength="3"/><br/><br>
        密      码:<input type="password" name="userpwd" value="123456" size="20" maxlength="3"/><br/><br/>
        性      别:<input type="radio" value="1" name="sex" checked/><input type="radio" value="2" name="sex"/><br/><br>
        爱      好:<input type="checkbox" value="" name="hobby"/>打乒乓球
                <input type="checkbox" value="" name="hobby"/>打篮球
                <input type="checkbox" value="" name="hobby" checked/>打羽毛球<br/><br/>
        文  件  域:<input type="file"/><br/><br/>
        隐  藏  域:<input type="hidden" value="123456"/><br/><br/>
        多行文本框:<textarea name="txt" rows="5" cols="30" disabled readonly>今天天气很好textarea><br><br>
        地      区:<select>
                <option value="1"/>北京
                <option>上海option>
                <option selected>广州option>
                select><br/><br/>
        <input type="submit" value="提交"/>  
        <input type="reset" value="重置"/>  
        <input type="button" value="自定义按钮">
    form>
   body
html>

浏览器效果图:

什么是表单-表单组成-表单原理-表单实例-表单实例解析_第1张图片

实例解析:

  我们为了方便,我直接引用个照片,大家一看就明白了。

什么是表单-表单组成-表单原理-表单实例-表单实例解析_第2张图片

你可能感兴趣的:(▷10.1)——牛腩新闻发布)