HTML之表单
Posted Guarding and trust
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML之表单相关的知识，希望对你有一定的参考价值。
不为失败找理由，只为成功找方法。所有的不甘，因为还心存梦想，所以在你放弃之前，好好拼一把，只怕心老，不怕路长。
文章目录
前言
今天为1024程序员节，但是学习的脚步不能停下来，撸起袖子加油干。
一、概述
表单是什么，表格和单元格组成？我觉得这样理解有误。其实表单在互联网这个时代无处不在，很常见，我们来看图说话：
上述的图片是不是非常的熟悉，没错，聪明的你肯定想到了，这些就是表单，不过这上面的表单做了一些处理，原样看起来还是比较简陋的，至于为啥这么说，现在进行学习。
二、表单form
&bnsp; &bnsp;表单也称form，这是个关键词，或者说是关键的标签，我们知道html是由标签组成的，那么表单也叫form标签。格式如下：
<form action="提交表单的路径"></form>
代码比较简单，一行就可以了，action这个属性比较关键了，是提交给服务器的路径url。现在已经知道form标签的结构了，接下来才是重点，from标签里面有很多input标签元素，而一开始展示的图片效果不是from标签的功劳，而是input标签（元素）的功劳，接下来我们一一来讲解常用的input标签的类型。
三、form中的input标签
input标签里有一个type属性，这个是来分辨各input标签的类型的，不同的类型可以实现不同的效果，接下来我们来看一下我们常用的type属性值：
| 类型 | 描述 |
|---|---|
| text | 显示文本框，可看见 |
| password | 显示密码框，不可见 |
| radio | 显示单选框 |
| checkbox | 显示复选框 |
| button | 显示按钮 |
| date | 显示时间 |
| tel | 手机号校验 |
| submit | 提交按钮 |
| hidden | 隐藏域 |
以上就是比较常用的input标签类型，如果把以上的类型掌握了，可以应付大多数情况。演示代码如下：
<!-- ...省略代码 -->
<form action="#">
文本框：<input type="text"/></br>
密码框：<input type="password"></br>
按钮：<input type="button" value="按钮"></br>
单选框：<input type="radio" name="b">男<input type="radio" name="b">女</br>
多选框：<input type="checkbox" name="a">javascript
<input type="checkbox" name="a">HTML
<input type="checkbox" name="a">CSS</br>
文件上传：<input type="file"></br>
提交按钮：<input type="submit" value="提交"></br>
隐藏域：<input type="hidden"></br>
重置按钮：<input type="reset" value="重置"></br>
</form>
<!-- ...省略代码 -->
效果图如下：
需要注意的是单选框的name属性值要一致，不然会变成复选框，而复选框的name也要一致，虽然不会影响功能，但是到后期做项目的时候与后端交互是需要一致的。
学到这里，是不是有些疑惑了，这么简陋的，怎么可能和图片展示的那么美观的呢。其实那是因为做了装饰，也就是写了CSS样式，接下来写一个登录案例来练练手吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="login">
<h2>欢 迎 回 来</h2>
<p>请先登录</p>
<form action="#" method="get">
<table>
<tr>
<td>
<label for="user">用户名</label>
</td>
</tr>
<tr>
<td class="in">
<input type="text" name="userName" id="user"/>
</td>
</tr>
<tr>
<td>
<label for="pwd">密码</label>
</td>
</tr>
<tr>
<td class="in">
<input type="password" name="pwd" id="pwd"/>
</td>
</tr>
<tr>
<td class="but">
<input type="submit" value="登录" />
</td>
</tr>
<tr>
<td class="a">
<a href="#">忘记密码？</a>
<a href="register.html">立即注册-></a>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
上述代码为HTML，这里使用了表格布局，表单中嵌套表格，其中有一行是引入了CSS样式，也就是为这个表单添加了样式，如果删除或注释掉效果图如下：
这就比较简陋了，那么加上装饰，CSS代码如下所示：
/* 通配符 */
*
box-sizing: border-box;
margin: 0;
/* 全局设置 */
html,body
width: 100%;
height: 100%;
/* 大盒子 */
.box
width: 100%;
height: 100%;
display: flex;
/* border: solid 1px saddlebrown; */
background: url("../img/login_bg.jpg") center no-repeat;
background-size: cover;
/* 左边，暂无设置 */
.box .left
width: 40%;
flex: 1;
/* border: solid 1px salmon; */
height: 100%;
/* 右边登录 */
.box .right
width: 40%;
flex: 1;
/* border: solid 1px rgb(114, 152, 250); */
height: 100%;
/* 登录盒子 */
.login
margin: auto auto;
width: 50%;
margin-top: 25%;
/* border: 2px silver solid; */
padding: 3%;
background-color: rgba(173, 223, 250, 0.3);
box-shadow: 0px 0px 10px rgb(135, 227, 239);
font-size: 1.1rem;
/* 标题设置 */
.login h2,p
text-align: center;
margin: 0 0 6px 0;
.login p
font-size: 0.9rem;
color: rgb(179 247 246);
/* 表单设置 */
.login .in input
font-size: 1.1rem;
outline: none;
border-width: 0 0 2px 0;
width: 300px;
background-color: transparent;
margin-bottom: 15px;
/* 登录按钮 */
.login .but
text-align: center;
.login .but input
padding: 5px 15px;
font-size: 1.1rem;
border-radius: 8px;
border: 0;
cursor: pointer;
margin-bottom: 15px;
width: 100%;
background-color: rgb(146 234 245);
.but input:hover
color: saddlebrown;
/* 底部提示 */
.a
display: flex;
.a a
flex: 1;
text-decoration: none;
.a a:last-child
padding-left: 35%;
代码已经有了注释。这里需要注意的是背景图片：background: url(“…/img/login_bg.jpg”) center no-repeat; 里的url，这个图片可以自己选择，主要是需要注意放的路径，具体的代码路径看最后，这里先把效果图扔出来瞧瞧吧：
看着有点模样，目录结构如下：
四、小结
以上就是本章的全部内容，本篇主要是简单的介绍了什么是表单，还有表单里面的input标签的常用类型，最后还做了一个登录小案例。
以上是关于HTML之表单的主要内容，如果未能解决你的问题，请参考以下文章