16.15　创建提交按钮

访问者输入的信息如果不发送到服务器，就没什么用。应该总是为表单创建提交按钮，让访问者可以将信息交给你，如图16.15.1、图16.15.2和图16.15.3所示。（还可以使用图像提交表单数据，参见“创建带图像的提交按钮”。）

  1. <input type="submit" class="create_profile" value="Create Account">

图16.15.1　如果不填写name属性，则提交按钮的名-值对就不会传给脚本。由于通常不需要这一信息，因此下面的做法是有益的

  1. .create_profile {
  2.      background-color: #DA820A;
  3.      border: none;
  4.      border-radius: 4px;
  5.      box-shadow: 2px 2px 2px #333;
  6.      cursor: pointer;
  7.      color: #fff;
  8.      margin: 12px;
  9.      padding: 8px;
  10.      text-shadow: 1px 1px 0px #CCC;
  11. }

图16.15.2　通过使用类，我为提交按钮应用了背景、字体格式和一些CSS3特性

  1. 创建提交按钮的步骤

  • 输入。

  • 如果需要，输入value="submit message"，这里的submit message是将要出现在按钮上的文本。

  • 最后输入/>。

16.15　创建提交按钮 - 图1

图16.15.3　提交按钮可以激活表单收集的数据。可以通过value属性定制按钮的内容（对访问者来说，Create Account（创建账户）比默认文本Submit Query（提交查询）更为明确）

  1. 创建带图像的提交按钮

  • 输入。

  • 输入将要出现在按钮中图像左侧的文本（如果有的话）。

  • 输入，其中的image.url是将要出现在按钮上的图像的名称。

  • 输入alt="alternate text"，这里的alternate text是当图像无法显示时需要出现的文本。

  • 如果需要，添加其他的图像属性。

  • 输入/>以结束图像。

  • 输入将要出现在按钮中图像右侧的文本（如果有的话），如图16.15.4和图16.15.5所示。

  • 输入。

  1. <button type="submit" class="create_profile">Create Account</button>

图16.15.4　可以使用button元素创建文字旁边有图像的提交按钮

16.15　创建提交按钮 - 图2

图16.15.5　带图像的提交按钮的代码稍微复杂一些，但它可以为创建元素和为元素添加样式提供更多的控制

提示　如果省略value属性，那么提交按钮就会显示默认的Submit Query。

　

提示　提交按钮的名-值对仅在设置了name属性以后才会发送给脚本。因此，如果忽略name属性，就不必处理这一额外的、通常没有意义的提交数据。

　

提示　如果有多个提交按钮，可以为每个按钮设置name属性和value属性，从而让脚本知道用户按下的是哪个按钮。

　

提示　还可以使用button元素创建不带图像的提交按钮。

　

提示　使用HTML5的button元素可以创建更漂亮的提交按钮，因为它可以包含其他的HTML元素，而不仅仅是简单的文本值。注意，不同的浏览器呈现它们的方式并不一致，因此需要进行大量的测试和CSS工作才能让按钮在不同的浏览器中呈现一致的显示。