接着上一章HTML，我们把一些概念和基本元素进行了整理，这章我们主要整理一下表单元素。
文本框
input标签type属性为text的时候表示文本框，size可以设置文本框的长度，即显示的字体长度，value可以设置文本框的初始值，placeholder可以设置文本框提示语。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框</title>
</head>
<body>
<input type="text" /><br>
<input type="text" size="10" /><br>
<input type="text" value="有初始值的文本框" /><br>
<input type="text" placeholder="有提示语的文本框" />
</body>
</html>
效果：
密码框
input标签type属性为password时表示密码框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码框</title>
</head>
<body>
<input type="password" />
</body>
</html>
效果：
表单
form标签用于向服务器提交数据，比如账号密码，action属性可以设置我们表单提交的地址，method属性可以设置我们表单提交的方式，有get和post两种请求方式，如果不指定method属性的值，默认是以get方式请求。
get和post的区别：get是form默认的提交方式，提交参数会拼接到地址后面，而且不同浏览器对于拼接参数的长度有不同的限制，一般我们在获取数据时会使用get请求。当method属性值为post时，发送的请求是以post方式发送的，提交的数据不会在浏览器显示出来，可以用于提交二进制数据，比如上传文件，get请求则不能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="user" /><br>
<input type="password" name="pwd" /><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
效果：
单选框
input标签type属性为radio时为单选框，checked属性为checked则选中，如果由多个单选框且同时只能选中一个，则需要将所有单选框的name值设置成相同的值，也就是将其放在同一个分组里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选框</title>
</head>
<body>
一<input type="radio" name="group" /><br>
二<input type="radio" name="group" checked="checked" /><br>
三<input type="radio" name="group" /><br>
四<input type="radio" name="group" /><br>
五<input type="radio" name="group" /><br>
</body>
</html>
效果：
复选框
input标签type属性为checkbox时为复选框，checked属性为checked表示选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复选框</title>
</head>
<body>
一<input type="checkbox" name="group" /><br>
二<input type="checkbox" name="group" checked="checked" /><br>
三<input type="checkbox" name="group" /><br>
四<input type="checkbox" name="group" checked="checked" /><br>
五<input type="checkbox" name="group" /><br>
</body>
</html>
效果：
下拉列表
select标签即下拉列表，option标签代表选项，select标签的size属性可以设置显示的选项，multiple属性值为multiple时，可以进行多选，option标签selected属性为selected时默认选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉框</title>
</head>
<body>
<select size="3" multiple="multiple">
<option>选项一</option>
<option selected="selected">选项二</option>
<option selected="selected">选项三</option>
<option>选项四</option>
</select>
</body>
</html>
效果：
文本域
textarea标签即为文本域，与文本框不同的是，文本域可以有多行，并且可以有滚动条，属性cols和rows可以设置宽度和行数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本域</title>
</head>
<body>
<textarea cols="9" rows="3"></textarea>
</body>
</html>
效果：
按钮
input标签type属性为button时为按钮，type属性为submit时为提交按钮，放在表单中，可以提交表单数据，type属性为reset时为重置按钮，可以重置表单数据，type属性为image时，可以使用图像作为按钮进行form表单提交，button标签就是按钮标签，功能更丰富，标签内容可以是文字也可以是图像，type属性值为submit时为提交按钮，type属性值为reset时为重置按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮</title>
</head>
<body>
<input type="button" value="普通按钮" /><br>
<input type="submit" value="提交按钮" /><br>
<input type="reset" value="重置按钮" /><br>
<input type="image" src="/Users/liuzhenyu/Downloads/下载.jpeg" /><br>
<button><img src="/Users/liuzhenyu/Downloads/下载.jpeg" /></button><br>
</body>
</html>
效果：
结尾
前端HTML的部分基本整理完毕，这是基础，后面会经常用到，熟能生巧，接下来就是CSS的部分，个人对于CSS总觉的比较难，想实现一个复杂的页面时，脑子没有头绪，不知如何下笔，下一章，我们就来整理一下CSS，希望整理之后，对于CSS能有所进步！
这是我觉得不错的学习网站之一，里面还是比较全面的，如果大家都能学完，保证可以找到一个不错的工作，点击进去看看吧！
