一、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. MixConv

    深度分离卷积一般使用的是3*3的卷积核,这篇论文在深度分离卷积时使用了多种卷积核,并验证了其有效性 1.大的卷积核能提高模型的准确性,但也不是越大越好.如下,k=9时,精度逐渐降低 2. mixCon ...

  2. Python 面向对象编程之进阶使用

    我们在https://www.cnblogs.com/yinsedeyinse/p/9976280.html中学习了面向对象的编程方法.现在学习他的进阶用法. 1. 静态方法 2. 类方法 3. 属性 ...

  3. AtomicReference和AtomicStampedReference

    AtomicReference类提供了一个可以原子读写的对象引用变量. 原子意味着尝试更改相同AtomicReference的多个线程(例如,使用比较和交换操作)不会使AtomicReference最 ...

  4. 获取sender进程所产生的trace文件

    直接开启数据库实例级别的sql_trace是不现实的,会对所有连接到oracle的session都产生sql_trace,这样会产生大量的trace文件(垃圾文件),因此为跟踪特定进程的sql信息,可 ...

  5. Django【第19篇】：Django之extra

    extra过滤 extra extra(select=None, where=None, params=None, tables=None, order_by=None, select_params= ...

  6. 用TweenMax.js动画让数字动起来

    html: <div class="val2">0</div> js: let val2 = document.getElementsByClassName ...

  7. 分布式事务 GTS 的价值和原理浅析

    GTS 今年双 11 的成绩 今年 2684 亿的背后,有一个默默支撑,低调到几乎被遗忘的中间件云产品——GTS(全局事务服务,Global Transaction Service),稳稳地通过了自 ...

  8. springboot + 注解 + 拦截器 + JWT 实现角色权限控制

    1.关于JWT,参考: (1)10分钟了解JSON Web令牌(JWT) (2)认识JWT (3)基于jwt的token验证 2.JWT的JAVA实现 Java中对JWT的支持可以考虑使用JJWT开源 ...

  9. H-ui.admin v3.1学习之路（一）：导航栏信息无法在内容区显示

    注:我使用的是别人的模板文件在我的云盘“素材模板—H-ui.admin’中. 直接上代码: <li class="dropDown dropDown_hover"> & ...

  10. Linux双网卡绑定和解除

    转载双网卡绑定和解除  一定要在服务管理中关闭NetworkManager服务并禁用自动启动,因为NetworkManager服务是实时生效的,一旦设置错,管理员就得回到机房接显示器配置网络连接. 以 ...