整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML5的表单设计

用过Delphi的程序员，对Form这个词应该比较熟悉。在Delphi中，Form被翻译为“窗体、窗口”，作用是：为用户提供界面，供用户输入信息，向用户展示处理结果。

HTML5中也有Form，功能与Delphi中的Form差不多，用于接收用户输入，和服务器进行交互。不过HTML5中的Form，中文一般译为“表单”。

1、Web前端与Web后端的交互

Web前端，指浏览器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript脚本。

Web后端，指运行在服务器上的，为Web前端提供服务的软件，Web后端也常常被称为Web服务器。

在HTML5中，Web前端与Web后端交互的流程一般如下：

（1）Web前端向Web后端发起HTTP请求；

（2）Web后端收到HTTP请求后，进行业务处理；

（3）Web后端向Web前端返回HTTP响应。

到目前为止，我们在HTML5中碰到的Web前端发起HTTP请求的方式有两种：

第1种：HTML页面通过<a>元素向用户提供超级链接，用户点击该链接时，会向服务器发起请求；

第2种：HTML页面通过表单为用户提供输入界面，用户提交表单时，会向服务器发起请求。

2、GET请求和POST请求

HTTP请求有八种，对Web前端开发者来说，最常用的是GET请求和POST请求。

GET请求：向Web后端请求指定的页面；GET请求携带的数据，以URL参数的形式提供；

POST请求：向Web后端提交数据，请求Web后端对数据进行处理；POST请求携带的数据，在请求消息体中提供。

在HTML5中，用户点击链接地址，Web前端向后端发起GET请求；

在HTML5中，用户提交表单，Web前端可以向后端发起GET请求，也可以发起POST请求。

说明：由于目前没有和后端服务器对接，为了便于对表单设计进行展示，下面的例子HTML文档，都是用GET请求来提交数据。

3、表单的主要元素

<form>元素：表示表单；

<input>元素：表单中的输入控件，输入控件可以是文本框、单选框、复选框、按钮等等；

<label>元素：表单中的标签控件；

<button>元素：表单中的按钮控件；

<select>与<option>元素：用于实现列表框和下拉菜单；

<textarea>元素：多行文本控件。

4、表单提交文本框的输入

下面是一个可以提交文本框输入的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请输入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，展示效果如下：

我们可以在文本框中输入信息，例如输入tom：

当我们点击“提交”按钮后，浏览器显示信息如下；

可以看到，数据被提交给process.html页面，并且附带了一个参数name，且值为我们输入的tom。

5、表单提交用户对单选框的选择

下面是一个可以提交单选框被选信息的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性别：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>国籍：</label>
<br/>
中国：<input type="radio" name="nationality" value="Chinese" /> <br/>
美国：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英国：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择性别和国籍，例如我们选择“男”和“中国”：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了gender参数的值为male，nationality参数的值为Chinese。

6、表单提交用户对复选框的选择

下面是一个可以提交复选框被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的业余爱好：</label>
<br/>
美术：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
厨艺：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择自己的业余爱好，例如我们选择足球、唱歌、厨艺：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了三个hobby参数，其值分别为Football，Singing和Cook。

7、表单提交用户对下拉菜单的选择

下面是一个可以提交下拉菜单被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的学历：</label>
<br/>
<select name="education">
<option value="primary_school">小学</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大学</option>
</select>
<br/><br/>
<label>请选择您的兴趣爱好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美术</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">厨艺</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以单选我们的学历，也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历，选择“美术”和“厨艺”两项爱好：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了education参数和两个hobby参数，education的值为junior_high_school，hobby的值为Art和Cook。

上面列举了几种控件的HTML5表单设计方法，其它的控件也大概差不多，把多个控件组合在同一个<form>元素中的方法也是相同的，这里就不再赘述了。

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表头–【居中/加粗】

table标记的边框–border

table标记的宽度–width

table标记的高度–height

table标记的水平对齐方式–align

table标记的表格背景色–bgcolor

table标记的表格边框色–bordercolor

table标记的表格中的内容与边框之间的距离–cellpadding

table标记的表格中的边框与边框之间的距离–cellspacing【默认是1px】

tr标记的align属性–设置当前行的水平对齐方式

tr标记的bgcolor属性–设置当前行的背景色

tr标记的valign属性–设置当前行的垂直对齐方式【top/middle/bottom】

td标记的align属性–设置当前列的水平对齐方式

td标记的bgcolor属性–设置当前列的背景色

td标记的valign属性–设置当前列的垂直对齐方式【top/middle/bottom】

合并单元格

水平方向合并单元格–跨列—colspan

  • 垂直方向合并单元格–跨行—rowspan
  • 删除多余的单元格*

以下是计算器的控制面板代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>计算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

<tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>

<tr align="center">

<td>MC</td>

<td>MR</td>

<td>MS</td>

<td>M+</td>

<td>M-</td>

</tr>

<tr align="center">

<td>&lt;-</td>

<td>CE</td>

<td>C</td>

<td>+/-</td>

<td>√</td>

</tr>

<tr align="center">

<td>7</td>

<td>8</td>

<td>9</td>

<td>/</td>

<td>%</td>

</tr>

<tr align="center">

<td>4</td>

<td>5</td>

<td>6</td>

<td>*</td>

<td>1/x</td>

</tr>

<tr align="center">

<td>1</td>

<td>2</td>

<td>3</td>

<td>-</td>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

<tr align="center">

<td colspan="2">0</td>

<td>.</td>

<td>+</td>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一项【条目】

默认的标志是有顺序的数字

我们可以通过ol的type属性来修改标志

1–有顺序的数字

a–有顺序的小写字母

A–有顺序的大写字母

i–有顺序的小写罗马数字

I–有顺序的大写罗马数字

start属性设置书顺序的开始值

2.2 无序列表

ul—无序列表

li—列表中的每一项【条目】

默认的标志是实心点

我们可以通过ul的type属性来修改标志

circle–圆形【。】

disc----实心点[默认]

square–正方形

none–没有标志

2.3 自定义列表

dl—自定义列表

dt—自定义列表的头

dd—子项目

以下是有序，无序，和自定义列表

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>列表</title>

</head>

<body>

<ul type="none">

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

<ol type="A">

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

<dl>

<dt>自定义列表</dt>

<dt>自定义列表</dt>

<dt>自定义列表</dt>

</dl>

</body>

</html>

3. 表单<form>

主要负责采集信息的，可以将采集的信息提交。

form的属性

action—指定表单数据的后端处理程序

method----指定表单数据的提交方式【get[默认]/post】

get提交数据会将被处理的数据跟随在请求地址之后

被提交的数据255个字符

https://www.baidu.com/s?&wd=html

post提交数据会将被处理的数据封装到http协议的头

https://www.baidu.com/s

被提交的数据没有限制

通常情况下提交文件只能用post

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<table border="1" align="center" cellpadding="20px" cellspacing="0">

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在发送前对所有字符进行编码（默认）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>将空格转换为 "+" 符号，但不编码特殊字符。</td>

</tr>

</table>

</body>

</html>

表单元素

input 文本框/密码框/单选按钮/复选框…

seletc 下拉列表

textarea 文本域—富文本编辑器


家好，今天我将和大家一起动手做个练习，使用 Flexbox 布局创建一个响应式的表单，本篇文章不会和大家生硬的去介绍 Flexbox 知识点，而是通过实践的形式去理解 Flexbox 布局。刚学前端时，大家会不会觉得CSS太容易了，没有过多实践，就开始上手实践JS和相关的前端框架了，一遇到一些样式的问题，就开始慌了，无从下手。CSS学好用好，也是需要花功夫的，不要因为CSS简单了，就轻视了，毕竟作为一个专业的前端，要给大家呈现产品美感，更多考验的是 CSS 的功底。

表单项目长啥样？

好了，给大家唠叨多了，让我们回到本节的案例，虽然例子简单，但是要做漂亮了，是需要花功夫的，这里我们不使用媒介查询属性，完全使用 Flexbox 布局就能创建一个完美的响应式表单，在动手之前，我们来看看，我们例子长什么样？

创建表单 HTML 结构

好了，基于上面的长相，我们开始动手创建表单的 HTML 结构：

  • 创建 .flex-outer 无序列表包裹整个表单元素。
  • 接着在内部创建 .flex-inner 无序列包裹复选表单元素。
  • 几乎所有的表单都有其对应的 label 元素，方便扩大表单元素的点击区域。

仅此而已，我们通过定义了两个无序列表创建了一个简单表单结构，示例代码如下：

<div class="container">
 <form>
  <ul class="flex-outer">
    <li>
      <label for="first-name">First Name</label>
      <input type="text" id="first-name" placeholder="Enter your first name here">
    </li>
    <li>
      <label for="last-name">Last Name</label>
      <input type="text" id="last-name" placeholder="Enter your last name here">
    </li>
    <li>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email here">
    </li>
    <li>
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="Enter your phone here">
    </li>
    <li>
      <label for="message">Message</label>
      <textarea rows="6" id="message" placeholder="Enter your message here"></textarea>
    </li>
    <li>
      <p>Age</p>
      <ul class="flex-inner">
        <!-- list items here -->
      </ul>
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
 </form>
</div>

接下来我们创建 .flex-inner 元素及年龄选择部分，示例代码如下：

<ul class="flex-inner">
  <li>
    <input type="checkbox" id="twenty-to-twentynine">
    <label for="twenty-to-twentynine">20-29</label>
  </li>
  <li>
    <input type="checkbox" id="thirty-to-thirtynine">
    <label for="thirty-to-thirtynine">30-39</label>
  </li>
  <!-- more list items here -->
</ul>

完成以上结构后，我们的页面长这样：


基本的模样有了，我们需要借助CSS进行美化，长这样，我们怎么好意思拿的出手。

定义表单样式

1、接下来，我们来定义 flex 容器，在这个例子中，我们在以下元素进行应用：

  • .flex-outer 列表中的元素
  • 在 .flex-inner 的 checkboxes 元素

此外，我们需要让这些弹性元素在 cross-axis 轴方向垂直居中，并支持溢出换行：

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

2、接下来我们来定义弹性盒子的宽度，我们先从定义 .flex-outer 列表的元素开始 。

我们的需求是这样的：

  • 每个 labels 的宽度至少为120px, 最多为220px。
  • 每个表单元素的宽度至少为220px

通过这个需求，我们应该明确表单宽度至少为340px, lable 与对应的表单元素水平并排显示。

上述的值，你可以根据自己的需求自行修改

最终我们完成后的代码如下所示：

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}
 
.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

完成后的效果如下图所示：


定义提交按钮样式

我们继续来定义提交按钮的样式，其也是弹性元素，基本的样式代码如下：

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

处理 Checkboxes 的样式

接着我们继续处理复选框 Checkboxes 的样式，在定义基础表单样式时，我们设置了.flex-inner 容器的最小宽度为220px。

1、首先我们来处理下每个 Checkbox 的宽度，设置其父元素 li 标签的宽度为100px:

.flex-inner li {
  width: 100px;
}

2、接着我们来使用 justify-content 属性来定义元素在 main-axis 的显示方式，这里我使用了 space-between 对齐方式。

.flex-inner {
  justify-content: space-between;
}

使用这个属性，能让我们很好的均匀的对齐元素，唯一不足时，每行项目不相等时，最后一行的对齐方式也许不是你期望看到的。

如上图所示，也许你希望最后两个元素相邻显示，不是分的这么开，我么该如何做呢？

  • 首先移除 justify-content 的对齐属性
  • 修正每个弹性盒子的宽度，比如宽度为50%
  • 使用媒介查询器，当屏幕宽度大于 992px 时，我们添加弹性盒子的宽度，让其宽度为25%。

通过以上学习，我们有两点需要明确的是：

  • flex 布局为我们提供了极大的灵活性，让我们可以快速的构建漂亮表格。
  • 上述CSS具体的值只是适用本示例，你可以根据自己的需求进行调整。例如，我们这里的年龄复选框定义的宽度很小，才100px, 如果他们的宽度不同的话，你可以使用 flex: 1 100px 来定义宽度，弹性盒子能足够智能化的处理对齐问题。

最终完成的样式

完成上述基本的架子后，我们需要让表单更加漂亮些，比如添加样式，定义文字大小、盒子的内间距、宽度等，由于文章篇幅有限，这里就不过多介绍了，最终完成的 CSS 代码如下所示：

body {
  font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  background: #3AAFAB;
  color: #fff;
  padding: 50px 0;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

.flex-inner li {
  width: 100px;
}

小节

到这里，本示例就完成了，我们用最少最简单的方式使用 flexbox 布局完成了响应式表单的创建，大家可以访问以下网址，在线体验效果：

https://www.qianduandaren.com/demo/flexform/

最后分享给大家一张图，方便大家记忆和学习弹性盒子布局。


在线咨询
上一篇：用html代码编写的免费软件下载和安装教程
下一篇：前端常见面试题之display:none和visibility:hidden的区别

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 永定县 仙居县 庐阳区 大武口区 禅城区 柳州 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服