(6)从零开始学前端(学习笔记)-JavaWeb-HTML-表单，表单项
(6)从零开始学前端(学习笔记)-JavaWeb-HTML-表单，表单项本人自学两年，想通过笔记来帮助一些刚入门的小白快速的了解前端知识，如果喜欢这个系列，可以点赞评论支持一下嘛，谢谢各位啦:$qqq
纯手打非复制，如有错误可以在评论区纠正，感谢支持{:1_893:}
--续借上集--
前言
今天的学习目标以表单标签和表单项标签为主，学习完此帖，我们会清楚表单有什么作用？表单提交的原理和表单的属性构成，要求每个人都能构建出一个登录注册的静态页面！希望大家在学习完之后能够记录一下，以防笔记丢失,,,顺便祝大家能有一个快乐且充实的周末。
表单标签
1. 什么是表单标签？
由<form>标签构成的用于提交表单信息传输数据到远程客户端或服务器，其中在<form>表单中可以包含文本、单(复)选框、提交按钮等等。
2. 表单标签中的属性及其作用
标签属性作用属性
form表示表单标签action属性，用于提交数据的路径
method属性，提交表单的方式(get和post)
autocomplete属性，是否记录不全(on和off)
3. 提交方式(get和post)
get：表单数据会显示在地址栏中，不安全。地址栏的url有长度限制！
post：表单数据不会显示在地址栏中，数据封装在请求体中，安全。没有长度限制！
表单项标签
1. 什么是表单项标签？
通常为input标签用作输入、选择、获取、点击等等，这种从用户方面获取的标签叫做表单项标签。
2.表单项标签
标签属性作用属性
lable表单元素说明，配合表单项标签使用for属性，属性值必须和表单项的id属性值一致
input表单项标签，多种植入类型来接受用户数据type属性，数据的类型
id属性，唯一标识
name属性，提交服务器标识
value属性，默认数据值
plaveholder属性，默认提示信息
requireed属性，是否必须有数据
button按钮标签，不同的按钮有不同的作用type属性，按钮的功能(submit，reset，button)
3.表单项标签属性值
标签属性作用
<input type="text">普通文本输入框
<input type="password">密码输入框
<input type="email">邮箱输入框
<input type="radio">单选框。必须有相同的name属性值，value属性值是要提交的数据，checked属性默认是否选中
<input type="checkbox">多选框。必须有相同的name属性值，value属性值是要提交的数据，checked属性默认是否选中
<input type="date">日期框
<input type="time">时间框
<input type="datetime-local">本地日期时间框
<input type="number">数字框
<input type="range">滚动条数据框 min-最小值 max-最大值 step-步进值
<input type="search">可清楚文本
<input type="tel">电话框
<input type="url">网址框
<input type="file">文件上传框
<input type="hidden">隐藏域，value属性值是要提交的数据
4. 案例：
题目：用户登录页面
要求：1.能够提交数据
2.保证账号信息能够快速输入
3.保证密码信息不泄露
4.所有信息长度不会受限
解析： 首先我们需要在页面中添加form表单，因为信息不能泄露且长度信息不受限制，所以使用post提交，其次要保证账号信息能够快速输入，也就是记录登陆过的账号，所以我们需要将autocomplete属性设置为on。所有的input表单我们需要添加name属性，以方便浏览器获取表单项中的数据。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册表单</title>
</head>
<body>
<form action="#" method="get" autocomplete="on">
账号：<input type="text" name="username"/>
密码：<input type="password" name="password"/>
<button type="submit">提交</button>
</form>
</body>
</html>
图文演示：
https://s1.ax1x.com/2022/03/27/qwWS2V.png
总结
本文主要内容：HTML表单、HTML表单项，后续也会推出续集。希望大家能持续关注{:1_921:}
{:1_893:}谢谢大家能够看到这里，如果觉得对你有帮助的话，可以点赞评论支持一下嘛谢谢各位啦:loveliness:
想学习编程，不过没有自制力 lvshunbing 发表于 2022-3-27 14:46
想学习编程，不过没有自制力
加油，我们一起努力{:301_993:} {:301_998:}.太慢了 直接三章起步啊 按复杂度总结 ddistupid 发表于 2022-3-27 15:12
.太慢了 直接三章起步啊 按复杂度总结
感谢每一个看过我帖子支持过我的读者们，每次看到读者们发给我评论的时候，我都很开心，尽管没很多时间一个一个的去回复，耽误也会把所有的评论看完，说我写的好的，我会感到很开心，说我不好的，我也会在今后的日子里给大家带来更好的优质内容，顺便给那些支持过我人说一声谢谢{:1_893:}。每天的时间不是很多，读者们看到我是发了一篇文章，其实我也要搜很多资料，因为笔记记录的不是很全面都是自己看的懂别人可能看不懂，怕新人看不太懂，所以我用比较简介易懂的语言来写...如果还是希望能多看点内容的话，我会尽量做到每个帖子写多一点，毕竟我现在还是一个学生，每天最重要任务就是学习，发帖也是我的爱好，所以希望读者们能够理解我，十分感谢读者们的支持，你们的支持是我前进地动力！:loveliness:
页:
[1]