一、form标签（一）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> 10 form标签</title>

    </head>

    <!--作用是收集并提交用户数据给指定的服务器

        form会收集标签内部的数据，外部的不要

        action：数据表示提交给谁 也就是url

        method: 有get(适合少量数据,表单数据以？隔开 ,不同键值对用&隔开 )

                post 适合大量数据,安全,隐藏提交

           表单域：给用户提供可以进行书写和选择的标签

           在点击数据提交时 ,form标签会将内部的所有数据按照method中指定的方式提交给action中指定的地址

           表单中提交的是各种input中的value的值

        1、文本框  如登录页面

        2、单选框  type值是：radio 属性值是：sex 只能选择一个 ;checked 设置一个初始默认值,一进入网页性别默认是男

        3、多选框 checkbox 一个多选组需要相同的name属性 ;value要提交给数据库存储的,要不同; checked 默认选择

        4、下拉框  name：数据提交的键名,必须指定  option:表示一个下拉选项；select selected 是默认选项;

        5、文本域  textarea 当前可以更改框的大小 ，声明一个可以书写大量文字的框 css和js都会用到 rows和cols声明行和列数

        6、普通按钮 不具有数据提交功能

        7、隐藏标签 一些数据不能给用户看，但是必须随着用户数据的提交而提交

    -->

    <body>

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

            <!--name的作用就是给数据进行描述，让数据库后台指定数据是干啥的,必须赋值，否则submit不会提交，因为他是无效数据

            提交数据为键值对 键是name的值 ，值为用户填的数据

            -->

            账号：<input type="text" name="uname" id="" value="" /> <br />

            密码：<input type="password" name="pwd" id="" value="" /> <br />

            <!--password 把用户填的隐藏起来 ..代替-->

            性别：男<input type="radio" name="sex" value="1" checked="checked" />

                       女<input type="radio" name="sex" value="0" /> <br /> 

            爱好：吃饭 <input type="checkbox" name="favorite" value="1" checked="checked" />

                       睡觉 <input type="checkbox" name="favorite" value="2" />

                       旅游<input type="checkbox" name="favorite" value="3" /> <br /> 

             籍贯：

            <select name="address">

                <!--  <option value="0">--请选择--</option>-->

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

                <option value="2">上海市</option>

                <option value="3" selected="selected">湖北省</option>

            </select>

            <br />

            介绍：

            <br />

            <textarea name="intro" rows="10" cols="40">

            </textarea>

            <br />

            <input type="hidden" name="hidden" value="哈哈" />

            <input type="button" value="普通按钮" />

            <input type="submit" value="登录" />

            <!--submit是个按钮 一点就开始提交数据-->

        </form>

    </body>

</html>

二、模拟百度和360

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>模拟百度和360</title>

    </head>

    <body>

        <!--注意 百度和360的action (是网址?之前的内容) 及name(百度是wd 360是q)的设置-->

        <form action="https://www.baidu.com/s" method="get">

            <input type="text" name="wd" id="" value=""/>

            <input type="submit" value="百度一下"/>

        </form>

        <form action="https://www.so.com/s" method="get">

            <input type="text" name="q" id="" value=""/>

            <input type="submit" value="360搜索"/>

        </form>

    </body>

</html>

三、注册页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>注册页面</title>

    </head>

    <body>

        <h3>新用户注册</h3>

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

            <table border="1px" cellspacing="0"cellpadding="5px">

                <tr height="35px">

                    <td width="80px">用户名：</td>

                    <td width="200px">

                        <input type="text" name="uname" value="" />

                    </td>

                </tr>

                <tr height="35px">

                    <td >密码：</td>

                    <td width="200px">

                        <input type="password" name="pwd" value="" />

                    </td>

                </tr>

                <tr height="35px">

                    <td>邮箱：</td>

                    <td>

                        <input type="text" name="mail" value="" />

                    </td>

                </tr>

                <tr height="35px">

                    <td>手机号：</td>

                    <td>

                        <input type="text" name="phone" value="" />

                    </td>

                </tr>

                <tr height="35px">

                    <td>性别：</td>

                    <td>

                        男<input type="radio" name="sex" value="1" checked="checked"/>

                        女<input type="radio" name="sex" value="0" />

                    </td>

                </tr>

                <tr height="35px">

                    <td>爱好：</td>

                    <td>

                        吃饭<input type="checkbox" name="fav" value="1"  checked="checked"/>

                        睡觉<input type="checkbox" name="fav" value="2" />

                        玩乐<input type="checkbox" name="fav" value="3" />

                    </td>

                </tr>

                <tr height="35px">

                    <td>籍贯：</td>

                    <td>

                        <select name="address">

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

                            <option value="2" selected="selected">上海市</option>

                            <option value="3">湖北省</option>

                        </select>

                    </td>

                </tr>

                <tr height="35px">

                    <td>自我介绍：</td>

                    <td>

                        <textarea name="intro" rows="5" cols="15">

                        </textarea>

                    </td>

                </tr>

                <tr height="35px">

                    <td colspan="2" align="center">

                    <input type="checkbox" name="agree" value="1" />

                    是否同意本公司协议

                    </td>

                </tr>

                <tr height="35px">

                    <td colspan="2" align="center">

                        <input type="submit" value="注册"/>

                    </td>

                </tr>

            </table>

        </form>

    </body>

</html>

[19/05/18-星期六] HTML_form标签的更多相关文章

  1. [19/05/16-星期四] HTML_body标签(表格标签)

    一.概念 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签

    一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...

  3. [19/05/15-星期三] HTML_body标签(超链接标签和锚点)

    一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...

  4. [19/05/14-星期二] HTML_body标签(列表标签和图片标签)

    一.列表标签 <!-- 快捷键 1.<meta charset="UTF-8"/> 用m6可直接写出 2.复制当前1行到下一行 ctrl+shift+R --&g ...

  5. [19/05/13-星期一] HTML_head标签 和 body标签_文本标签

    一.概念 概念:超文本标记语言 作用:需要将Java在后台根据用户的请求处理结果在浏览器显示给用户.数据已经过来了,但是显示可能比较凌乱,所以html应用而生,就像写作文要加标点看着舒服. 在浏览器中 ...

  6. Kubernetes部署通用手册 (支持版本1.19,1.18,1.17,1.16)

    Kubernetes平台环境规划 操作环境 rbac 划分(HA高可用双master部署实例) 本文穿插了ha 高可用部署的实例,当前章节设计的是ha部署双master 部署 内网ip 角色 安装软件 ...

  7. [19/05/27-星期一] JavaScript_ 条件语句(if语句)和循环语句(while 、for、do-while)

    一.条件语句 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  8. Java 18 新增@snipppet标签，注释中写样例代码更舒适了！

    在这次的Java 18中,新增了一个@snipppet标签,主要用于JavaDoc中需要放示例代码的场景.其实在Java 18之前,已经有一个@code标签,可以用于在JavaDoc中编写小段的代码内 ...

  9. Spring Security（18）——Jsp标签

    目录 1.1     authorize 1.2     authentication 1.3     accesscontrollist Spring Security也有对Jsp标签的支持的标签库 ...

随机推荐

  1. 前端错误监控上报公共方法，可在父页面及iframe子页面同时使用

    先创建公共文件error-reported.js 内容如下: /** * 获取前端错误信息进行上报 * @param iframe */ function catchError (iframe) { ...

  2. libboost_regex 备份用时

    libboost_regex-vc100-mt-s-1_57.lib  //生成数据

  3. TCP/IP基础总结性学习（7）

    确保 Web 安全的 HTTPS 在 HTTP 协议中有可能存在信息窃听或身份伪装等安全问题.使用 HTTPS 通信机制可以有效地防止这些问题. 一. HTTP 的缺点 HTTP 主要有这些不足,例举 ...

  4. linux下安装MySQL（mariadb）

    MySQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源 ...

  5. Python---协程---重写多线程

    一. # 用协程的方式,修改播放电影和音乐的练习题 # 用协程的方式完成播放 movie_list = ["斗破.mp4", "复仇者联盟.avi", &quo ...

  6. 【leetcode】1110. Delete Nodes And Return Forest

    题目如下: Given the root of a binary tree, each node in the tree has a distinct value. After deleting al ...

  7. linux运维、架构之路-Kubernetes集群部署

    一.kubernetes介绍        Kubernetes简称K8s,它是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部 ...

  8. Redis实战（十一）Redis面试题

    序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...

  9. JWT--无状态单点登录

    序言 传统的 seesion 认证存在的问题: 1)用户信息存储在内存中,用户规模大之后增加服务器开销:2)由于登录信息存储在内存中,限制了登录机器,不利于分布式站点. JWT JWT无状态登录 常规 ...

  10. 【Java】使用@Valid+BindingResult进行controller参数校验

    @Valid @Valid注解用于校验,所属的包: javax.validation.Valid. 你可以定义实体,在实体的属性上添加校验规则,在API接收数据时添加@Valid注解,这时你的实体将会 ...