HTML之form表单标签的学习
from表单
表示
<form>form表单域</form>
作用
收集并替提交用户数据给指定服务器
属性
- action：收集的数据的提交地址（也就是URL）
- method：收集的数据的提交方式，其中提交方式有两种：get和post
-- get： 适合小量数据，提交的表单数据以？隔开拼接在URL后面，不同的数据的键值对使用&符号隔开，不安全
-- post： 适合大量数据 ，隐式提交， 安全
form表单标签的使用
在点击提交数据时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的地址
注意
- form标签会收集其标签内部的数据
- form表单的数据提交需要依赖于submit提交按钮
- 表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交，提交的表单项数据为键值对，键为name属性的值，值为用户书写的数据
附上尚硅谷学习的截图两张，进行细节补充：https://www.bilibili.com/video/BV1Y7411K7zz?p=21
form表单域
作用
给用户提供可以进行书写或者选择的标签
form表单域标签
文本框：<input />
属性：
演示：
<input type="text" name="id"/>
<input type="password" name="pwd"/>
单选框：<input />
注意：
①要提交的表单必须具有name属性值，否则不会提交
②提交的表单项数据为键值对，键为name属性的值，值为用户书写的数据
演示：
男<input type="radio" name="sex" id="sex" value="0" checked="checked"/>
女<input type="radio" name="sex" id="sex" value="1"/>
多选框：<input/>
注意：一个多选组需要使用相同的name属性
演示：
<input type="checkbox" name="ball" value="1"/>打篮球
<input type="checkbox" name="guitar" value="1"/>弹吉他
<input type="checkbox" name="haban" value="1"/>滑滑板
下拉框：<select></select>
子标签：<option></option>
一个option标签标示一个下拉选项
演示：
<select name="from">
<option>--请选择--</option>
<option value="1">郑州</option>
<option value="2">信阳</option>
<option value="3">开封</option>
</select>
文本域：<textarea/>
声明一个可以书写大量文字的文本区域
演示：
<textarea name="intro" cols="11" rows="11"></textarea>
提交框：<input />
演示：
<input type="submit"/>
案例演示
<html>
<head>
<title>演示</title>
<meta charset="utf-8"/>
</head>
<body>
<!--action后面的#号是我随便填的，如果填百度网址的话提交会跳转到百度，当然最终应该填我们要提交的地址-->
<form action="#" method="get">
姓名：<input type="text" name="id"/><br/>
班级：<input type="text" name="class"/><br/>
学号：<input type="text" name="stu"/><br/>
身份证号：<input type="password" name="pwd"/><br/>
性别：男<input type="radio" name="sex" id="sex" value="0" checked="checked"/>
女<input type="radio" name="sex" id="sex" value="1"/><br/>
爱好：<input type="checkbox" name="ball" value="1"/>打篮球
<input type="checkbox" name="guitar" value="1"/>弹吉他
<input type="checkbox" name="haban" value="1"/>滑滑板<br/>
籍贯：<select name="from">
<option>--请选择--</option>
<option value="1">郑州</option>
<option value="2">信阳</option>
<option value="3">开封</option>
</select><br/>
个人说明：<br/>
<textarea name="intro" cols="11" rows="11"></textarea><br/><br/>
<input type="submit"/>
</form>
</body>
</html>
效果展示：
HTML之form表单标签的学习的更多相关文章
- Unit 2.前端之html--table(表格),form(表单)标签
一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
- 【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...
- [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- form表单验证字段学习总结
字段的属性梳理 最重要的字段 required inital widget error_messages ----------------------------------------------- ...
- HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...
- [转]SpringMVC<from:form>表单标签和<input>表单标签简介
原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...
- HTML的<form>表单标签
表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- form表单标签的enctype属性的作用
Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded 这是通过表单发送数据 ...
随机推荐
- Beta冲刺--总结随笔
一.项目预期计划 时间 (天) 预期计划 完成情况 1-2 登录注册页面美化 完成 3-5 完善寻/失物登记以及管理页面 完成 6-9 实现剩下的用户管理.我的账号等页面 50% 9-10 最终测试与 ...
- CS系统中分页控件的制作
需求:在一个已有的CS项目(ERP中),给所有的列表加上分页功能. 分页的几个概念: 总记录数 totalCount (只有知道了总记录数,才知道有多少页) 每页记录数 pageSize (根据总 ...
- 【JavaWeb】JSP 页面
JSP 页面 简介 JSP(Java Server Pages),即 Java 的服务器页面.它的主要作用是代替 Servlet 程序回传 HTML 页面的数据,因为 Servlet 程序回传 HTM ...
- Java远程下载文件到本地（http协议和ssh2协议）
Java中java.io包为我们提供了输入流和输出流,对文件的读写基本上都依赖于这些封装好的关于流的类中来实现.前段时间遇到了以下两种需求: 1.与某系统对接,每天获取最新的图片并显示在前端页面.该系 ...
- 关于软件架构中的b/s
**B/S架构 b/s只需要一个浏览器,用户就可以通过不同的网址访问不同的服务器程序. 优点:开发,安装,部署,维护简单 缺点:对硬件要求过高,用户的体验会受到影响 首先是资源分类:**可以分为静态资 ...
- SQL中的主键，候选键，外键，主码，外码
1.码=超键:能够唯一标识一条记录的属性或属性集. 标识性:一个数据表的所有记录都具有不同的超键 非空性:不能为空 有些时候也把码称作"键" 2.候选键=候选码:能够唯一标识一条记 ...
- 如何实现一个简易版的 Spring - 如何实现 Constructor 注入
前言 本文是「如何实现一个简易版的 Spring」系列的第二篇,在 第一篇 介绍了如何实现一个基于 XML 的简单 Setter 注入,这篇来看看要如何去实现一个简单的 Constructor 注入功 ...
- linux之curl工具
curl是一个利用URL语法在命令行下工作的文件传输工具,作用是发出网络请求,然后获取数据:它支持文件的上传和下载:支持多种通信协议. 一.查看网页源码 直接在 curl 命令后加上网址,默认会发送 ...
- GMT UTC CST ISO 夏令时 时间戳，都是些什么鬼？
目录 ✍前言 本文提纲 版本约定 ✍正文 GMT:格林威治时间 凭什么格林威治作为标准时间? 地球自转 中国有哪几个时区? 美国有哪几个时区? GMT和Http协议的渊源 UTC:世界标准时间 UTC ...
- 你不知道的Linux目录
Linux二级目录及其对应的作用 主要文件