HTML&CSS基础篇之十六：表单

最新推荐文章于 2023-05-13 23:49:27 发布

浪子大侠走江湖

最新推荐文章于 2023-05-13 23:49:27 发布

阅读量359

点赞数

分类专栏： HTML&CSS&JS 文章标签： html

本文链接：https://blog.csdn.net/sunnydreamfly/article/details/77583944

版权

HTML&CSS&JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

代码

<form id="beanform" action="http://www.starbuzzcoffee.com/processorder.php" method="post">
      <table>
        <tr>
          <th>Choose your beans:</th>
          <td>
            <select name="beans">
              <option value="House Blend">House Blend</option>
              <option value="Bolivia">Shade Grown Bolivia Supremo</option>
              <option value="Guatemala">Organic Guatemala</option>
              <option value="Kenya">Kenya</option>
            </select>
          </td>
        </tr>

        <tr>
          <th>Type:</th>
          <td>
            <input type="radio" name="beantype" value="whole" id="whole" />
            Whole bean
            <br />
            <input type="radio" name="beantype" value="ground" id="ground" checked="checked" /> 
            Ground
          </td>
        </tr>

          <tr>
          <th>Extras:</th>
          <td>
            <input type="checkbox" name="extras[]" value="giftwrap" id="giftwrap" />
            Gift wrap
            <br />
            <input type="checkbox" name="extras[]" value="catalog" id="catalog" checked="checked" />
            Include catalog with order
          </td>
        </tr>

        <tr>
          <th>Phone:</th>
          <td>
             <input type="text" name="phone" />
          </td>
        </tr>

        <tr>
          <th>Ship to:</th>
            <td>
              <table>
                <tr>
                  <td>Name:</td>
                  <td>
                    <input type="text" name="name" id="name" value="" />
                  </td>
                </tr>
                <tr>
                  <td>Address:</td>
                  <td>
                    <input type="text" name="address" id="address" value="" />
                  </td>
                </tr>
                <tr>
                  <td>City:</td>
                  <td>
                    <input type="text" name="city" id="city" value="" />
                  </td>
                </tr>
                <tr>
                  <td>State:</td>
                  <td>
                    <input type="text" name="state" id="state" value="" />
                  </td>
                </tr>
                <tr>
                  <td>Zip:</td>
                  <td>
                    <input type="text" name="zip" id="zip" value="" />
                  </td>
                </tr>
              </table>
            </td>
          </tr>

        <tr>
          <th>Customer Comments:</th>
          <td>
            <textarea name="comments" id="comments" rows="10" cols="48"></textarea>
          </td>
        </tr>

        <tr>
            <th></th>
          <td>
            <input type="submit" value="Order Now" />
          </td>
        </tr>
      </table>
    </form>

body {
  background: #efe5d0 url(images/background.gif) top left;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin: 20px;
}

table {
  border: thin dotted #7e7e7e;
  padding: 10px;
  background-color: #e1ceb8;
}

th {
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  padding-top: 2px;
}

td {
  vertical-align: top;
  padding-bottom: 15px;
}

table table {
  border: none;
  padding: 0px;
}

table table td {
  text-align: right;
  padding-bottom: 0px;
}

表单如何工作

表单基本上就是带有一块输入信息区域的网页。当提交表单时，表单中的信息被打成一个数据包发送给web服务器，web应用程序对之进行处理。处理完成后，你可以获得什么呢，当然是另一个响应页面了。

访问一个有XHTML表单的网页，填写后提交。
浏览器将表单中的数据打包，并发送到Web 服务器。
Web服务器接收来自表单的数据包，传给Web应用程序做处理
Web应用程序处理表单中的数据，然后创建一个空白的新XHTML网页，做为响应传送给Web服务器。
Web服务器将来自应用程序的响应又回发给浏览器。
响应是一个XHTML网页。
浏览器接收响应并在屏幕中显示出来。

表单在浏览器中如何工作

表单只是浏览器中的一块XHTML。

在浏览器中加载网页：碰到表单元素时，便在网页上创建一些控件，这些控件允许你输入各种各样的数据。
输入数据：使用控件输入数据。
提交表单：通过点击“提交”（submit）按钮控件，来提交表单。
服务器的响应：服务器一旦受到表单中的数据，便将其传递给合适的Web应用程序来处理。处理的结果放在一个空白的新的XHTML网页中，这个网页以XHTML格式返回到浏览器，然后浏览器将这个网页显示出来。

用XHTML写什么

<form action="http://www.headfirstlabs.com/contest.php" method="POST">
      <p>Just type in your name (and click Submit) to enter the contest:<br />

        First name: <input type="text" name="firstname" value="" /><br />
        Last name:  <input type="text" name="lastname" value="" /><br />
        <input type="submit" />
      </p>
</form>

浏览器生成什么

使用form元素创建一个表单。任何元素块级别的元素都可以构成form元素，不过这里有一组专门构成表单的元素。
每个表单元素输入信息的方式都不同：例如文本框、复选框、选项菜单等。我们将一一验证这些元素。不过先回过头来看一看前面的网页。

表单元素如何工作

form 元素，它不仅包括了组成表单的所有元素，而且还告诉浏览器在提交表单时将表单数据发送至何处（以及浏览器发送数据的方式）

<form action="http://www.headfirstlabs.com/contest.php" method="POST">
    放在你表单中的所有元素
</form>

form 是表单开始标记，所有表单元素置于开始标记中。
action属性说明了web服务器的URL
method属性指定了表单以何种方式给服务器发送数据，这里使用最普通的方式：POST。

表单可以添加什么
你可以将任意的块元素放入表单中，不过这不是我们现在该关心的。
我们感兴趣的是那些创建浏览器空间的表单元素。

input表单元素

输入文本框

<input type="text" name="fullname" />

input输入文本框元素用来输入一行文本。它的可选属性允许你设置输入的最大字符数及文本框大小。
type=”text”。
大多数表单元素都需要提供一个供web应用程序使用的名字。
input元素是一个空元素，所有使用/>符号结束标记。

提交按钮

<input type="submit" />

input提交元素创建了一个表单的提交按钮。当你点击这个按钮时，浏览器边发送表单至web应用程序进行处理。
按钮上默认的字符为”Submit“，可以改变按钮上的文字。

输入单选框

<input type="radio" name="hotornot" value="hot" />
<input type="radio name="hotornot" value="not"/ >

input 的单选框元素创建了有多个按钮的单选控件，任何时候只能选择其中的一个，就好像过去的汽车收音机按钮，按下一个按钮就会弹起其他按钮。

每个选项设置一个带radio属性的input标记
单选框的按钮对应给定的选项，按钮选项名必须相同。
不过每个选项的值不相同。

输入复选框

<input type="checkbox" name="spice" value="salt" />
<input type="checkbox" name="spice" value="pepper" />
<input type="checkbox" name="spice" value="garlic" />

input 的复选框元素创建了一个复选框的空间，可以被选中或不被选中。你可以使用多个复选框，根据你的爱好选中或多或少的选项。

与单选框相同，每个选项置一个带复选框的input标签
相关的复选框名字相同。
每个复选框的值都不相同。

表单中可以添加什么？
不是每个表单元素都要使用input。有些元素，比如菜单的select和可输入多行文本的textarea，它们都不使用input标签。

文本区

<textarea name="comments" rows="10" cols="48"></textarea>

texarea元素创建了一个可输入多行文本的文本框。如果输入的文本超出文本区的大小，那么文本区的右边会出现一个滚动条。

textarea 不是一个空元素，所有它有开始和结束标记
使用name属性获取一个唯一的名字
属性rows告诉浏览器文本区的高度。
属性cols告诉浏览器文本区的宽度
任何位于<textarea>开始标签和</textarea>结束标记之间的文本都是浏览器中文本区控件的初始文本。

选择列表

<select name="characters">
    <option value="Buckaroo">Buckaroo Banzai</option>
    <option value="Tommy"></option>
    <option value="Penny"></option>
    <option value="Jersey"></option>
    <option value="John"></option>
</select>

select 元素为网页创建菜单控件。菜单提供了一种在一组选项中选择的方式。select与option共同使用。
select 元素作用于全部的菜单选项，并将这些选项归入一个菜单。
option元素定义每个菜单选项。
option元素内容描述了菜单选项，每个菜单选项包含了一个提交的菜单选项值。

表单元素名如何工作

表单元素名在表单和处理表单的Web程序之间建立链接。

表单中的每个输入控件都有一个name属性。
赋予一个唯一的名字。
当提交一个表单时，浏览器就会使用唯一的名字来打包所有的数据。
浏览器将你的每个数据和标签赋予唯一的名字属性值。接着浏览器将这些名字以及它们的值发送给服务器。
Web应用程序需要有标签的表单数据，这样才能将数据分开。

QA
* input与textarea 区别
输入单行文本用input，输入多行文本用textarea

如何自定义提交按钮上的文本
在这个元素中添加value属性，然后给它设置一个值。
input与textarea输入文字的多少有限制吗
无论哪个元素，浏览器都限制了你可以输入的文本字数。
如果你需要限制用户输入到input文本的字数，你可以使用maxlength属性设置其值为一个特定的数字。比如设置100就是100个字符（英文，中文怎么计算？）
对于textarea,XHTML没有限制用户输入字数的方法。
为什么option元素没有name 属性？而其他元素都有
全部的option元素事实上都是菜单的一部分，都是有由select元素创建的，所以我们只需要一个名字命名整个菜单就可以了。当提交表单时，只把当时选中的选项值连同整个名字发送给服务器。
表单的每一个元素的名字是唯一的，但是所有的input单选框元素的名字怎么都是相同的？
单选框按钮一般是一组，如果你使用相同的名字，浏览器就可以知道一组单选框按钮。所有这一组的按钮命名为一个名字才有意义。
复选框的工作原理
当浏览器将表单数据发送给服务器时，浏览器将所有复选框的合并值合并为一个值连同复选框的名字一起发送。
复选框变量名 xxx[]

表单的提交方式

浏览器使用的两种基本方式：POST和GET
POST与GET都能完成相同事情—把表单数据发送给服务器—不同的是它们使用的方式。
POST把变量打包后隐藏在后台发送给服务器；
GET也把表单变量打包，不过在它向浏览器发送请求之前，附加在URL的末端部分。

POST，把所有的表单数据作为请求的一部分来发送，对用户来说是不可见的。用户只能在它的浏览器地址栏中看到Web应用程序的URL。

GET，请求中不包含任何表单数据，表单数据直接添加给URL自身，所有用户能够看到这些表单数据。注意添加在URL末端的表单数据。

QA
* 向服务器发送东西，为什么要叫做GET
浏览器的主要任务是什么呢，是从服务器获取网页。那么，当你使用GET时，浏览器像往常一样使用一般方式获取一个网页，除此之外，在表单事务中，它把较多数据附加在URL的末端。另外，浏览器还扮演了一个普通的请求角色。
而对于POST，浏览器实际上是创建了一个小型的数据包，然后发送给服务器。

什么时候用POST，GET
如果你希望用户能够标记网页，也就是提交表单后的结果，
那么你就使用GET，因为如果网页用POST方式的结果返回，就不能标记网页了。
当你的web应用程序返回一个搜索结果列表时，你可能希望用户能够标记返回的结果，这样用户不用在填写满表单就能看到结果了。

如果你的处理订单的Web应用程序，那么你不希望你的用户标记这个网页（否则用户每次返回所标记的网页，订单会被重复提交）。

有一种情况，绝不希望使用GET方式：当表单中的数据是私人数据时，比如信用卡或密码。由于URL以清晰的方式显示，那么通过浏览你的浏览器历史或者GET方法以某种途径获取标记页面，他人可以很容易地获取你的私人信息。

最后如果你使用的是textarea,你应该用POST，因为你可能会发送大量的数据，GET请求方式限制只能使用256字符，而POST在发送的数据页面大小上没有限制。
用不用表格来布局表单？
使用CSS布局表单是非常困难的，如果你愿意折损空间、花费时间来用CSS布局表单的话，无语。然而大多数表单在布局上都是表格式的，所以为什么要用CSS格式，而不采用表格布局表单呢？

表单中还有哪些元素？

Fieldsets和legends

<fieldset>
    <legend>Condiments</legend>
        <input type="checkbox" name="spice" value="salt" />
        Salt <br />
        <input type="checkbox" name="spice" value="pepper" />
        Pepper <br />
        <input type="checkbox" name="spice" value="garlic" />
        Garlic <br />
</fieldset>

fieldset元素包围了一组输入元素。
legend为每个组合提供一个标签。

口令

除了输入的文本被隐藏之外，input口令元素与input文本元素功能相同。隐藏输入文本对于那些要求你输入口令，秘密代码，或者不希望他人看到的敏感信息的表单是很有用处的。记住，从浏览器发送至Web应用程序的表单数据是不安全的，除非你做了安全措施。

<input type="password" name="secret" />

文件输入

这里有一个全新，我们从未谈及的input元素。如果需要将整个文件发送给Web应用程序，需要使用type=”file”的input元素，设置完毕后，input元素会创建一个控件，控件允许选择文件，而且当表单被提交，文件内容连同余下的表单元素一起发送给服务器。记住，Web应用程序希望接收一个上传的文件，还有注意，必须使用POST方式使用此元素。

<input type="file" name="doc" />

多选属性

在select 元素中添加一个值”multiple的multiple属性，就可以把单选菜单变成多选菜单。你可获取一个可替代下拉菜单的多选菜单，这个菜单再屏幕上显示出所有的选项，如果选项太多，就会出现一个滚动条），你可以选用按下ctrl(window)或者command(mac)来选择多个选项

<select name="characters" multiple="multiple">
    <option value="Buckaroo">Buckaroo Banzai</option>
    <option value="Tommy">Perfect Tommy</option>
    <option value="Penny Priddy">Penny</option>
    <option value="New Jersey">Jersey</option>
    <option value="John Parker">John</option>
</select>

通过multiple 属性，可以一次选择多个选项
只需要添加一个值为”multiple”的multiple属性，就可将单选菜单转化为多选菜单。

要点

form元素定义了一个表单，所有的input元素都放在form元素中。
Action属性包含了Web应用程序的URL。
Method 属性包括两种发送表单数据的方法：一种是POST，一种是GET。
POST将数据打包并将数据包做为请求的一部分发送。
GET也将数据打包并将数据包附在URL上
当表单数据为私有或数量大时，使用POST方式，比如textarea或者文件input元素。
对于可能要标注的请求，使用GET
input元素能够演变为网页找那个许多不同的input控件，主要取决于type的属性值。
Type为text，创建一个单元文件输入框。
Type为submit，创建一个提交按钮。
Type为radio，创建一个单选框按钮。所有单选框按钮名字相同，这些单选框组成一个互助互斥的按钮组。
Type为checkbox，创建一个复选框控件。多个复选框共享一个复选框名字，并可得到一组选项。
textarea元素创建一个多行文本输入区。
select 元素创建一个包括一个或多个option元素的菜单。option元素定义了菜单的项目。
如果把文本放入textarea元素的内容中，那么在网页上将会当成文本区控件的默认文本。
Text<input>元素中的value属性,可以单独为单行输入文本框设置value值。
在提交按钮上设置value属性，可改变按钮上的文字。
当网页表单被提交后，表单数据值与相应的表单数据名匹配成对，然后把所有的表单数据名与值发送给服务器。
表格常用作表单的版面设计，给表达一个表格式的结构。布局后，CSS为表单的外观进行样式话，比如颜色、字体等。
XHTML允许使用fieldset元素组合表单元素。
lable元素以一种很简单的方式给表单元素附加标签。