HTML表格 - 输入类型和提交按钮示例表格是网络中最重要的部分之一。没有它们，就不会有收集数据、搜索资源或注册接收有价

表格是网络中最重要的部分之一。没有它们，就不会有收集数据、搜索资源或注册接收有价值信息的简便方法。

你可以用HTMLform 元素在网站上嵌入表单。在表单元素内部，有几个输入被嵌套。这些输入也被称为表单控件。

在本教程中，我们将探讨HTML表单元素，它所接受的各种输入类型，以及如何创建一个提交数据的按钮。

到最后，你将知道表单是如何工作的，你将能够自信地制作它们。

基本的HTML表单语法

<form action="mywebsite.com" method="POST">
    <!--Input of any type and textareas goes in here-->
</form>

HTML表单的输入类型

你可以使用<input> 标签来创建HTML中的各种表单控件。它是一个内联元素，采取的属性有：type,name,minlength,maxlength,placeholder ，等等。每个属性都有特定的取值。

placeholder 属性很重要，因为它可以帮助用户在输入任何东西之前了解输入栏的目的。

有20种不同的输入类型，我们将逐一看一下它们。

文本类型

这种类型的输入的值是 "text"，所以它创建了一个单行的文本输入。

<input type="text" placeholder="Enter name" />

文本类型的输入看起来像下面的屏幕截图: textInput

键入密码

顾名思义，一个密码类型的输入会创建一个密码。它对用户来说是自动不可见的，除非它被JavaScript操作过。

<input type="password" placeholder="Enter your password" />

passwordInput

键入电子邮件

任何电子邮件类型的输入都定义了一个用于输入电子邮件地址的字段。

<input type="email" placeholder="Enter your email" />

typeEmail

数字类型

这种类型的输入只允许用户插入数字。

<input type="number" placeholder="Enter a number" />

numberInput

类型单选

有时，用户需要从众多选项中挑选一个。一个类型属性设置为 "单选 "的输入字段可以让你这样做。

 <input type="radio" />

typeRadio

复选框类型

所以，在输入类型为单选的情况下，用户将被允许从众多选项中挑选一个。如果你想让他们尽可能多的选择呢？这就是类型属性设置为checkbox 的输入的作用。

<input type="checkbox" />

typeCheckbox

提交类型

你用这种类型来给表单添加一个提交按钮。当用户点击它时，它会自动提交表单。它需要一个值属性，它定义了出现在按钮内的文本。

<input type="submit" value="Enter to Win" />

typeSubmit

按钮类型

一个类型设置为按钮的输入会创建一个按钮，它可以被JavaScript的onClick事件监听器类型所操纵。它创建的按钮就像提交类型的输入一样，但例外的是值默认是空的，所以必须指定它。

<input type="button" value="Submit" />

typeButton

文件类型

这定义了一个用于提交文件的字段。当用户点击它时，他们会被提示插入所需的文件类型，可能是图像、PDF、文档文件等等。

<input type="file" />

输入文件类型的结果看起来像这样。

fileInput

类型颜色

这是由HTML5引入的一种花式输入类型。通过它，用户可以提交自己喜欢的颜色，例如。黑色（#000000）是默认值，但可以通过将该值设置为所需的颜色来覆盖。

许多开发者将其作为一种技巧，以获得选择RGB、HSL和字母数字格式中可用的不同颜色色调。

<input type="color" />

这是一个输入颜色类型的结果:

colorInput

类型搜索

带有搜索类型的输入定义了一个文本字段，就像文本的输入类型一样。但这一次它的唯一目的是搜索信息。它与类型文本的不同之处在于，一旦用户开始输入，就会出现一个取消按钮。

<input type="search" />

typeSearch

类型URL

当输入标签的类型属性被设置为URL时，它会显示一个用户可以输入URL的区域。

<input type="url" />

typeURL

Tel类型

tel的输入类型可以让你从用户那里收集电话号码。

<input type="tel" />

typeTel

日期类型

你可能在一个网站上注册过，在那里你要求知道某个事件的日期。该网站可能使用了一个类型值设置为date的输入来实现这一目的。

<input type="date" />

这就是类型为日期的输入看起来像什么。

dateInput

类型Datetime-local

这和日期类型的输入一样，但它也可以让用户选择一个有特定时间的日期。

<input type="datetime-local" />

datelocalInput

周类型

周的输入类型让用户选择一个特定的星期。

<input type="week" />

weekInput

月份类型

月份类型的输入在点击后会弹出月份供用户选择。

<input type="month" />

monthInput

文本区

有些时候，用户需要填写多行文字，但在文本输入类型中并不合适（因为它指定的是单行文本字段）。

textarea Textarea可以让用户这样做，因为它定义了多行的文本输入。它有自己的属性，如 - 表示列的数量，表示行的数量。cols rows

<textarea cols="50" rows="20"></textarea>

textarea

多重选择框

这就像一个单选按钮和复选框的组合。它在页面中嵌入了两个元素--一个select 元素和一个option ，它总是嵌套在select 。

默认情况下，用户只能选择其中一个选项。但通过多重属性，你可以让用户选择一个以上的选项。

<select>
      <option value="HTML">Select a Language</option>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <option value="React">React</option>
</select>

selectDemo

如何给HTML输入加标签

为表单控件指定标签是很重要的。当它们通过其for 属性和输入的id 属性与输入字段正确连接时，用户就会更容易使用，因为他们可以直接点击标签本身来访问输入。

<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />

labelDemo

HTML表单如何工作

当用户填写表格并使用提交按钮提交时，表格控件中的数据会通过GET 或POST HTTP请求方法发送到服务器。

那么，服务器是如何指示的呢？表单元素需要一个action属性，它的值必须指定为服务器的URL。它还需要一个method属性，在这里指定它用来向服务器传达数值的HTTP方法。

这个方法可以是GET ，也可以是POST 。使用GET ，当数据被提交时，用户输入的值在URL中是可见的。但是用POST ，这些值是在HTTP头文件中发送的，所以这些值在URL中是不可见的。

如果表单中没有使用方法属性，就会自动假定用户想使用GET方法，因为这是默认的。

那么，什么时候应该使用GET 或POST 方法？在提交非敏感数据或从服务器检索数据时使用GET 方法（例如，在搜索期间）。在提交文件或敏感数据时，使用POST 请求。

小型项目。建立一个基本的联系表格

让我们把我们所学到的关于表单的知识用来制作一个简单的联系表单。我还将介绍一些新的概念，以完善这一切。

这里是HTML

<form action=example-server.com">
      <fieldset>
        <legend>Contact me</legend>
        <div class="form-control">
          <label for="name">Name</label>
          <input type="name" id="name" placeholder="Enter your name" required />
        </div>

        <div class="form-control">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            placeholder="Enter your email"
            required
          />
        </div>

        <div class="form-control">
          <label for="message">Message</label>
          <textarea
            id="message"
            cols="30"
            rows="10"
            placeholder="Enter your message"
            required
          ></textarea>
        </div>
        <input type="submit" value="Send" class="submit-btn" />
      </fieldset>
</form>

这段HTML代码中发生了什么？

首先，一个form 元素正在包裹其他每个元素。它有一个动作设置为：“example-server.com”, 一个假的服务器，表单数据将在那里被接收。

在表单元素之后，其他每个元素也被一个fieldset 元素所包围，在它下面还有一个legend 标签。

我们使用fieldset 元素将相关的输入分组，而legend 标签包含一个标题，传达表单的内容。

输入name,email, 和textarea 都在一个div 中，其类别为 form-control。所以它们的行为就像一个块状元素，以使CSS的样式设计更容易。

它们也是用required 属性验证的，所以当这些字段是空的或用户没有以适当的格式输入数值时，表单就不能提交。

做完这一切后，我们将得到下面的截图结果： unstyledForm

这有多难看？我们需要应用一些样式!

这里是CSS

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: cursive;
  }

 input,
    textarea {
    width: 100%;
    padding: 5px;
    outline: none;
  }

  label {
    line-height: 1.9rem;
  }

  input[type="submit"] {
   transform: translate(2.2%);
   padding: 3px;
   margin-top: 0.6rem;
   font-family: cursive;
   font-weight: bold;
  }

 fieldset {
   padding: 20px 40px;
 }

CSS代码在这里做什么？

我们用Flexbox将正文中的所有内容在水平方向上居中，在垂直方向上用100%的视口高度。我们使用了草书的字体。

我们给输入和textarea ，宽度为100%，这样它们就可以全部穿过。标签的最小行高为1.9rem（30.4px），所以它们不会离各自的输入端太近。

我们用变换属性特别设计了按钮（输入类型为按钮）的样式，把它推到中心，因为它有点偏离中心。我们给它加了一个3px的padding，让它周围有更多的间距。然后我们为它选择了一个草书字体，权重为黑体。

因为这个按钮太靠近textarea ，我们设置了一个0.6rem的margin-top，把它往下推一点。

我们给我们的fieldet元素在顶部和底部设置了20px的padding，在左边和右边设置了40px的padding，以推开它在它所包裹的form 元素周围创建的边界。

最后，我们得到了下面这个漂亮的表格： styledForm

结论

我希望本教程能帮助你了解表单的工作原理。现在你应该掌握了将表单集成到你的网站所需的知识，这样你就可以开始收集数据了。

谢谢你的阅读，并继续编码。

HTML表格 - 输入类型和提交按钮示例