一、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. 2019长安大学ACM校赛网络同步赛 M LCM （数论）

    链接:https://ac.nowcoder.com/acm/contest/897/M来源:牛客网 LCM 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65 ...

  2. windows 10 x64系统 jdk1.7、jdk1.8 切换（jdk为exe安装版本）

    电脑先安装的1.7,后来安装1.8,改JAVA_HOME为1.8后cmd->java.javac.java -version可用1.8 后想改为1.7,更改环境变量(步骤1)后cmd->j ...

  3. Makefile中$$的使用

    在linux的Makefile中,经常会见到$var和$$var的形式.下面就这两种表示方法的区别进行简单的概述. 在Makefile中的规则命令行中: $var:将Makefile中的变量var的值 ...

  4. 【hackerrank】Type of Triangle

    题目如下: Write a query identifying the type of each record in the TRIANGLES table using its three side ...

  5. 【leetcode】1155. Number of Dice Rolls With Target Sum

    题目如下: You have d dice, and each die has f faces numbered 1, 2, ..., f. Return the number of possible ...

  6. pycharm2017版本永久激活

    亲测有效,为了以后方便查看,就复制粘贴了一下 声明:转自https://blog.csdn.net/qq_34173491/article/details/81157519 目前比较好用的Python ...

  7. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  8. Eclipse 中的 parameter参数，property属性，preference首选项 区别

    parameter参数 1.配置框架 web.xml <init-param> <param-name>contextConfigLocation</param-name ...

  9. Linux内核设计与实现 总结笔记（第十五章）进程地址空间

    一.地址空间 进程地址空间由进程可寻址的虚拟内存组成,内核允许进程使用这种虚拟内存中的地址. 每个进程都有一个32位或64位的平坦地址空间,空间的具体大小取决于体系结构.“平坦”指的是地址空间范围是一 ...

  10. SpringMVC开发手册

    title: SpringMvc -- 开发手册 date: 2018-11-15 22:14:22 tags: SpringMvc categories: SpringMvc #分类名 type: ...