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表单标签的学习的更多相关文章

  1. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  2. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  3. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. form表单验证字段学习总结

    字段的属性梳理 最重要的字段 required inital widget error_messages ----------------------------------------------- ...

  5. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

  6. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  7. HTML的<form>表单标签

    表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...

  8. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  9. form表单标签的enctype属性的作用

    Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded         这是通过表单发送数据 ...

随机推荐

  1. 你都用过SpringCloud的哪些组件，它们的原理是什么？

    前言 看到文章的题目了吗?就是这么抽象和笼统的一个问题,确实是我面试中真实被问到的,某共享货车平台的真实面试问题. SpringCloud确实是用过,但是那是三四年前了,那个时候SpringCloud ...

  2. C#中foreach的实现原理

    C#中foreach的实现原理 在探讨foreach如何内部如何实现这个问题之前,我们需要理解两个C#里边的接口,IEnumerable 与 IEnumerator. 在C#里边的遍历集合时用到的相关 ...

  3. leetcode 1593. 拆分字符串使唯一子字符串的数目最大（DFS，剪枝）

    题目链接 leetcode 1593. 拆分字符串使唯一子字符串的数目最大 题意: 给你一个字符串 s ,请你拆分该字符串,并返回拆分后唯一子字符串的最大数目. 字符串 s 拆分后可以得到若干 非空子 ...

  4. 一. SpringCloud简介与微服务架构

    1. 微服务架构 1.1 微服务架构理解 微服务架构(Microservice Architecture)是一种架构概念,旨在通过将功能分解到各个离散的服务中以实现对解决方案的解耦.你可以将其看作是在 ...

  5. [从源码学设计]蚂蚁金服SOFARegistry之配置信息

    [从源码学设计]蚂蚁金服SOFARegistry之配置信息 目录 [从源码学设计]蚂蚁金服SOFARegistry之配置信息 0x00 摘要 0x01 业务范畴 1.1 配置作用 1.2 学习方向 0 ...

  6. 国内最具影响力科技创投媒体36Kr的容器化之路

    本文由1月19日晚36Kr运维开发工程师田翰明在Rancher技术交流群的技术分享整理而成.微信搜索rancher2,添加Rancher小助手为好友,加入技术群,实时参加下一次分享~ 田翰明,36Kr ...

  7. RocketMQ—消息队列入门

    消息队列功能介绍 字面上说的消息队列是数据结构中"先进先出"的一种数据结构,但是如果要求消除单点故障,保证消息传输可靠性,应对大流量的冲击,对消息队列的要求就很高了.现在互联网的& ...

  8. 1.2V升5V电源芯片，1.2V升3V的IC电路图方案

    镍氢电池就是典型的1.2V供电电源了,但是1.2V电压太低,需要电源芯片来1.2V升5V输出,或1.2V升3V输出稳压,1.2V单独难给其他芯片或者模块供电,即使串联1.2V*2=2.4V,也是因为电 ...

  9. C#从入门到放弃治疗一：初探C#世界

    C#是一款高级的面向对象语言,运行于.NET framework之上的高级程序设计语言.其语言规范和,语法和java有着惊人的类似之处.所以如果你在学习C#之前有着java的基础,你将快速地入门.当然 ...

  10. Docker 拉取镜像速度太慢

    Docker Hub 是我们分发和获取 Docker 镜像的中心,但由于服务器位于海外,经常会出现拉取/上传镜像时速度太慢或无法访问的情况.再加上运营方不断对 Docker Hub 的免费使用进行限制 ...