5 表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

  • 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
  • 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
  • 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性：

属性 值 描述
action 访问服务器地址 服务器端表单处理程序的URL地址
method post、get[默认值] 表单数据的提交方法
target 参考超链接的target属性 表单数据提交时URL的打开方式
enctype application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] 表单提交数据时的编码方式 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单标签</title>

</head>

<body>

<h3>注册用户</h3>

<form action="http://127.0.0.1:8888" method="post" enctype="application/x-www-form-urlencoded">

    <!--    用户名-->

    <p>

        <label for="user">姓名: </label>

        <input id="user" type="text" name="user" placeholder="用户名">

    </p>

    <!--    密码-->

    <p>密码:<input id="pwd" name="pwd" type="password"></p>

    <!--    复选框-->

    <p>爱好:

        篮球<input name="hobby" type="checkbox" value="basketball">

        足球<input name="hobby" type="checkbox" value="football">

        乒乓球<input name="hobby" type="checkbox" checked="checked" value="pingpang">

    </p>

    <!--单选框-->

    <p>性别:

        男<input name="gender" type="radio" value="man">

        女<input name="gender" type="radio" value="woman">

    </p>

    <!--    日期日历-->

    <p>生日: <input name="birthday" type="date"></p>

    <!--    下拉框-->

    <p>籍贯:

        <select name="province" multiple="multiple" size="3">

            <option value="hebei" selected="selected">河北省</option>

            <option value="shanxi">山西省</option>

            <option value="beijing">北京市</option>

            <option value="qinghai">青海省</option>

        </select>

    </p>

    <!--    提交-->

    <p>

        <input type="button" value="按钮">

        <input type="reset" value="reset">

        <input type="submit">

<!--        <button>提交数据</button>-->

    </p>

</form>

</body>

</html>
代码效果图如下：

5 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. 突破Windows的极限

    偶然碰到这类技术博客,甚感欣慰,但奈何技术水平达不到,很多都难以理解,故记录在此,用作日后学习. 国内有类似的中文翻译,比如:突破Windows极限:物理内存 但是外文链接已经失效,看不到原汁原味的英 ...

  2. 【Android逆向】制作Fart脱壳机，完成对NCSearch的脱壳操作

    1. 我的手机是Pixel 1 ,下载fart对应的镜像 镜像位置具体参考大佬博客 https://www.anquanke.com/post/id/201896 2 执行 adb reboot bo ...

  3. pycharm中如何改变主题

    这边分享一个我自己在用的主题,蛮简约的,关键字高亮显示.再也不用全都是一样的颜色了.网盘地址在最后哈 好了话不多说,教大家如何把主题设置到pycharm中 图1:首先把主题jar包下载下来,然后打开p ...

  4. heapq.merge()高效合并有序序列

    import heapq import random # 针对较大的数据集,采用heapq中的merge()方法 # merge()不是对整个合并后的序列排序,而是使用一个堆一次一个元素的生成一个新序 ...

  5. ABP的版本升级，从7.2.2升级到7.2.3

    1.升级ABP CLI 见前面的文章:ABP开发需要用到的命令 更新最新版本: ~~~ dotnet tool update -g Volo.Abp.Cli ~~~ 2.升级ABP Suite 见前面 ...

  6. 【Azure 事件中心】Flink消费Event Hub中事件, 使用Azure默认示例代码，始终获取新产生的事件，如何消费旧事件呢？

    问题描述 根据Azure Event Hub示例文档,[将 Apache Flink 与适用于 Apache Kafka 的 Azure 事件中心配合使用],配置好 consumer.config 文 ...

  7. 【Azure Developer】在微软云中国区，如何使用Microsoft GraphAPI连接到B2C Tenant

    问题描述 如题所述,当在中国区使用Microsoft GraphAPI连接B2C Tenant时候,如何来设置中国区的Endpoint呢?在GitHub的示例中,并没有示例介绍如何连接中国区.如 问题 ...

  8. ContextMenuManager右键z 右键菜单

    常用软件 下载 https://files.cnblogs.com/files/pengchenggang/ContextMenuManager右键z-右键菜单.rar?t=1664158084

  9. obs 屏幕录像 1. 屏幕放大缩小 2. 圆形摄像头

    obs 屏幕录像 1. 屏幕放大缩小 2. 圆形摄像头 屏幕放大缩小 windows 放大镜 屏幕放大快捷键 win + '+' 是放大屏幕 win + '-' 是缩小屏幕 因为obs不支持缩放功能, ...

  10. linux控制显示器的亮度

    我使用的manjaro yay -S redshift -b 白天:晚上 要应用的屏幕亮度(在 0.1 和 1.0 之间) -c 文件 从指定的配置文件加载设置 -g R:G:B 要应用的其他伽马校正 ...