表单应用场景

现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图:

目的是为了收集用户信息。

在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件:

包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:

一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

表单工作原理

表单语法

表单元素

1 表单域

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>

2 input 控件(重点)

在上面的语法中,<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。

1)单行文本域

type="text"

2)密码框

type="password"

注:密码域也是文本域的形式,输入到文本域的文字显示为“········”,可用属性同文本域

3)文件域

type="file"

不同浏览器外观不同。

4)单选框

type="radio"

同一组的name要相同。

5)复选框

type="checkbox"

属性:checked=“checked” 默认选中。

6)按钮

普通按钮、提交按钮、重置按钮。

7)图像域(图像提交按钮)

8)隐藏域

3 label标签(理解)

label 标签为 input 元素定义标注(标签)。

作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定。for的值是要绑定元素id的值

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"> 

4 textarea控件(文本域)

如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>

  

5 下拉菜单和列表标签

使用select控件定义下拉菜单的基本语法格式如下

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

注意:

  1. <select></select>中至少应包含一对<option></option>。

  2. 当定义了multiple为true时,为普通列表,默认是下拉列表

select标签属性

option标签属性

分组下拉菜单和列表标签

HTML——表单标签的更多相关文章

  1. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

  2. SpringMVC学习系列(11) 之 表单标签

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  3. (转载)SPRINGMVC表单标签简介

    SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍Spri ...

  4. 第五节:表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...

  5. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. SpringMVC 表单标签

    引入标签库 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" ...

  7. SpringMVC表单标签简介

    在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...

  8. struts2:非表单标签

    非表单标签主要用于输出在Action中封装的信息,这在实际运用中是很常见的. 1. actionerror标签 <s:actionerror>标签主要用于输出错误信息到客户端,该标签将Ac ...

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

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

  10. Struts2的标签库(五)——表单标签

    Struts2的标签库(五) --表单标签 几个特殊的表单标签的使用: 1.checkboxlist标签 该标签用于创建多个复选框,用于同时生成多个<input type="check ...

随机推荐

  1. cmake 加入调试信息

    1 首先在CMakeLists.txt中加入 SET(CMAKE_BUILD_TYPE "Debug")1在下面加入: SET(CMAKE_CXX_FLAGS_DEBUG &quo ...

  2. 【Luogu】【关卡2-13】线性数据结构(2017年10月)【还差一道题】

    任务说明:数组,链表,队列,栈,都是线性结构.巧用这些结构可以做出不少方便的事情. P1996 约瑟夫问题 n个人,排成环形,喊到m的人出列,输出出列顺序. 咳咳,这个题目不好写,尽管简单就是模拟题. ...

  3. go new

    go new 尽管没有构造函数,go有一个内置的函数new,可以用来分配一个类型需要的内存.new(X)和&X{}是等效的: goku := new(Saiyan) // 等效 goku := ...

  4. RAM SSO功能重磅发布 —— 满足客户使用企业本地账号登录阿里云

    阿里云RAM (Resource Access Management)为客户提供身份与访问控制管理服务.使用RAM,可以轻松创建并管理您的用户(比如雇员.企业开发的应用程序),并控制用户对云资源的访问 ...

  5. 折半枚举——poj3977

    暴力搜索超时,但是折半后两部分状态支持合并的情况,可用折半枚举算法 poj3977 给一个序列a[],从里面找到k个数,使其和的绝对值最小 经典折半枚举法+二分解决,对于前一半数开一个map,map[ ...

  6. ZROI week1

    \[ZROI day1\] \[Grid\] 题目描述 给定一个矩阵,小写字母,求一条路径使得从\((1,1) -> (n,m)\),字典序最小,并且每次只能向右或者向下. 题解 先考虑如果没有 ...

  7. LInux多线程编程----线程特定数据的处理函数

    1.pthread_key_t和pthread_key_create() 线程中特有的线程存储, Thread Specific Data .线程存储有什么用了?他是什么意思了?大家都知道,在多线程程 ...

  8. 项目管理模式:外瀑布内敏捷(有人称为“信封法”)--转自知乎大神:CORNERSTONE

    作者:CORNERSTONE 链接:https://www.zhihu.com/question/265968122/answer/878124580 来源:知乎 著作权归作者所有.商业转载请联系作者 ...

  9. 7. Python运算符之逻辑、成员、身份运算符及优先级

    运算符 逻辑表达式 描述 and x and y 布尔"与" - 如果 x 为 False,x and y 返回 False,否则它返回 y 的计算值. or x or y 布尔& ...

  10. leetcode-1053. 交换一次的先前排列

      题目描述: 给你一个正整数的数组 A(其中的元素不一定完全不同),请你返回可在 一次交换(交换两数字 A[i]和 A[j] 的位置)后得到的.按字典序排列小于 A 的最大可能排列. 如果无法这么操 ...