一、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. Tensorflow 多gpu训练

    Tensorflow可在训练时制定占用那几个gpu,但如果想真正的使用多gpu训练,则需要手动去实现. 不知道tf2会不会改善一下. 具体参考:https://wizardforcel.gitbook ...

  2. Maven项目的一些依赖

    Maven构建的Spring项目需要哪些依赖? <!-- Spring依赖 --> <!-- 1.Spring核心依赖 --> <dependency> <g ...

  3. LeetCode--142--环形链表II(python)

    给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 - ...

  4. appium环境666

    一.安装JDK,配置JDK环境    appium下载地址: https://github.com/appium/appium-desktop/releases/ 百度搜索下载就行,这里分享一个下载链 ...

  5. JavaScript三元运算符以及运算符顺序

    三目运算符(三元运算符) 三目运算符:运算符需要三个操作 语法:表达式1?表达式2:表达式3 表达式1是一个条件,值为Boolean类型 若表达式1的值为true,则执行表达式2的操作,并且以表达式2 ...

  6. 【Java】JavaMail使用网易企业邮箱发邮件

    邮件发送器 /** * 邮件发送器 * * @author Zebe */ public class MailSender implements Runnable { /** * 收件人 */ pri ...

  7. P1092 虫食算——题解

    题目传送 (据说官方正解为高斯消元,但用搜索也能过,这里就讲讲搜索算法吧.) 对于一道搜索题,首先考虑一下大体怎样搜索.因为要考虑加法的进位,所以从左往右搜索对于考虑进位来说十分麻烦,而从右往左搜索就 ...

  8. （21）UML类图学习及使用

    UML类图的学习和使用 1.参考博客http://www.uml.org.cn/oobject/201211231.asp

  9. Spring定时器Quartz

    <bean id="startQuertz" lazy-init="false" autowire="no" class=" ...

  10. 手把手教你学Vue-3(路由)

    1.路由的作用 1.当我们有多个页面的时候 ,我们需要使用路由,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 简单的路由 const ro ...