一、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. Kali Linux的发展史，专为数字取证和渗透测试而设计

    Kali Linux拥有非常强大的网络功能,Kali Linux是一个Debian衍生的Linux发行版,专为数字取证和渗透测试而设计.它是由OffensiveSecurityLtd维护和资助,是由M ...

  2. python装饰器的简单理解

    如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 装饰器的使用方法很固定: 先定义一个装饰函数(帽子)(也可以用类.偏函数实现) 再定义你 ...

  3. Java各种锁机制简述

    线程安全是多线程领域的问题,线程安全可以简单理解为一个方法或者一个实例可以在多线程环境中使用而不会出现问题. 在 Java 多线程编程当中,提供了多种实现 Java 线程安全的方式: 最简单的方式,使 ...

  4. java获取当前时间的年周月季度等的开始结束时间

    import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; /** * Created b ...

  5. mysql INNER JOIN关键字 语法

    mysql INNER JOIN关键字 语法 作用:在表中存在至少一个匹配时,INNER JOIN 关键字返回行.大理石平台维修 语法:SELECT column_name(s) FROM table ...

  6. docker安装禅道

    一.下载地址 禅道开源版:   http://dl.cnezsoft.com/zentao/docker/docker_zentao.zip 数据库用户名: root,默认密码: 123456.运行时 ...

  7. Python_018( isinstance,issubclass详解)

    1.isinstance() 1)class A:pass class B:pass b = B() print(isinstance(b,B) #True  #isinstance(obj,type ...

  8. HDU 2602 Bone Collector (01背包问题)

    原题代号:HDU 2602 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 原题描述: Problem Description Many yea ...

  9. ES的副本数量、插入大批量数据前，副本数应该设置为0

    多副本可以提升检索的能力,但是如果副本数量太多,插入数据的时候容易出现卡顿现象: 因为主分片要把数据同步给所有的副本,所以建议副本数量最好是1-2个: ---- Es在索引数据的时候,如果存在副本,那 ...

  10. 你的MySQL服务器开启SSL了吗？（转载）

    最近,准备升级一组MySQL到5.7版本,在安装完MySQL5.7后,在其data目录下发现多了很多.pem类型的文件,然后通过查阅相关资料,才知这些文件是MySQL5.7使用SSL加密连接的.本篇主 ...