表单用于收集不同的类型的用户输入，表单由不同类型的标签组成，相关标签及属性如下：

（1）<form>标签 定义整体的表单区域

-- action属性 定义表单数据提交址址

-- method属性 定义表单提交方式，一般有”get”方式和”post”方式

（2）<label>标签 为表单元素定义文字标注

（3）<input>标签 定义通用的表单元素

-- type属性：

--- type=”text” 定义单行文本输入

--- type=”password” 定义密码输入值

--- type=”radio” 定义单选框

--- type=”checkbox” 定义复选框

--- type=”file” 定义上传文件

--- type=”submit” 定义提交按钮

--- type=”reset” 定义重置按钮

--- type=”image” 定义图片作为提交按钮，用src属性定义图片地址

--- type=”hidden” 定义一个隐藏的表单域，用来存储值

-- value属性 定义表单元素的值

-- name属性 定义表单元素的名称，此名称是提交数据时的键名

（4）<textarea>标签 定义多行文本输入框

（5）<select>标签 定义下拉表单元素

（6）<option>标签 与<select>标签配合，定义下拉表单元素中的选项

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单</title>

</head>

<body>

    <h1>注册表单</h1>

    <!-- 表单 -->

    <form action="" method="get">

        <!-- action为空，提交到当前页面

             action为具体的某地址，提交到某地址

             method 如果不写，默认为get方式

             少量、不敏感的数据可以用get；

             大量、敏感的数据要用post方式

        -->

        <div>

            <label for="username">用户名：</label>

            <input type="text" name="username" id="username" placeholder="请输入用户名" />

                    <!-- 表单中是通过 name 属性来提交数据的，或者叫键名/数据库字段名

                     name 属性也比较重要

                     value 下面代码中的属性是键值

                     input中添加id属性，label标签的for属性值设置为id的值，

                     可以实现页面中点击 label 激活 input输入框

                     -->

        </div>

        <br />

        <div>

            <label for="password">密   码：</label>

            <input type="password" name="password" id="password" placeholder="请输入密码" />

        </div>

        <br />

        <div>

            <label>性   别：</label>

            <input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>  <!-- 单选框 设置点击label,激活input -->

            <input type="radio" name="gender" value="1" id="female"> <label for="female">女</label>

        </div>

        <br />

        <div>

            <label>爱   好：</label>

            <input type="checkbox" name="like" value="study" id="study"><label for="study">学习</label>

            <input type="checkbox" name="like" value="book" id="book"><label for="book">看书</label>

            <input type="checkbox" name="like" value="travel" id="travel"><label for="travel">旅行</label>

            <input type="checkbox" name="like" value="sports" id="sports"><label for="sports">健身</label>

        </div>

        <br />

        <div>

            <label>照   片：</label>

            <input type="file" name="">  <!-- 上传照片，用文件类型 -->

        </div>

        <br />

        <div>

            <label>个人介绍：</label>

            <textarea name="introduce"></textarea>

        </div>

        <br />

        <div>

            <label>籍   贯：</label>

            <select name="site" >    <!-- 定义下拉框 -->

                <option value="0">北京</option>   <!-- 设置选项值 -->

                <option value="1">上海</option>

                <option value="2">天津</option>

                <option value="3">河北</option>

                <option value="4">河南</option>

            </select>

        </div>

        <br />

        <!-- type="hidden" 存值，可用于提交数据，不在页面展示  -->

        <input type="hidden" name="hid01" value="01">

        <input type="submit" name="login" value="提交" />

        <input type="reset" name="clear" value="重置" />

        <br />

        <br />

    <!--

        <h4>图片提交</h4>

        可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用,如下：

        <br />

        不建议使用 <br />

        <input type="image" src="data:images/点这里.png" name="" />

    -->

    </form>

</body>

</html>

页面显示效果：

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. android开发默认图标怎么换？

    首先要在资源文件放入想换的图标图片拖到drawable-XX文件夹下, 然后打开AndroidManifest.xml这个配置清单文件找 到application标签里的这句android:icon= ...

  2. 加密算法之非对称加密RSA

    一:非对称加密的由来 RSA公钥加密算法是1977年由Ron Rivest.Adi Shamirh和LenAdleman在(美国麻省理工学院)开发的.RSA取名来自开发他们三者的名字.RSA是目前最有 ...

  3. python---用链表结构实现有序和无序列表的几个功能

    只是看看套路,没有深入练习. 如果真要自己写,可以基于此类. 但其实,在普通使用中,这样实现的性能,并没有python原生的列表性能好. 因为python原生列表的功能,是基于数组作扩展实现的. # ...

  4. 【bzoj1042】[HAOI2008]硬币购物 背包dp+容斥原理

    题解: 计数题 首先考虑容斥 这题很明显加了限制状态就很多 考虑没有限制 显然可以直接dp 然后 我们看一下 容斥 某一个使用>=k张 那么其实就是 f[i-k*c[]] 于是这样就可以做了

  5. uva 11992

    题意: 给定一个r*c(r<=20,r*c<=1e6)的矩阵,其元素都是0,现在对其子矩阵进行操作. 1 x1 y1 x2 y2 val 表示将(x1,y1,x2,y2)(x1<=x ...

  6. 【Android】ScaleAnimation 详解

    ScaleAnimation类是Android系统中的尺寸变化动画类,用于控制View对象的尺寸变化,该类继承于Animation类.ScaleAnimation类中的很多方法都与Animation类 ...

  7. ionic2+中修改minSdkVersion的方法

    具体方法很简单,直接在config.xml中找到下面这一行 <preference name="android-minSdkVersion" value="17&q ...

  8. mysql中trim()函数的用法

    去除左空格函数: LTRIM(str) mysql> SELECT LTRIM(' barbar'); -> 'barbar' 去除右空格函数: RTRIM(str) mysql> ...

  9. ansible Invetory(管理主机信息)

    1. 定义组机和组 inventory文件可以是许多格式之一,具体取决于您拥有的inventory插件. 对于这个例子, /etc/ansible/hosts的格式是一个INI(类似于Ansible的 ...

  10. Redis数据库 01概述| 五大数据类型

    1.NoSQL数据库简介 解决应用服务器的CPU和内存压力:解决数据库服务的IO压力: ----->>> ① session存在缓存数据库(完全在内存里),速度快且数据结构简单: 打 ...