<!--

    form

            HTTP协议

            action:提交的服务器网址

            method:get(默认)| post(应用：登录注册、上传文件)

            页面中的a img link 默认是get请求

            input

                type:

                    text: 文本输入框

                    password:密码输入框

                    file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'

                    submit:提交按钮  input 中一定有submit按钮才能提交跳转等任务

                    button:普通按钮

                name:提交到服务器端的key

                value: 显示的文本内容，与服务器端的value

                placeholder：文本代替

            placeholder  表单内显示的灰色提示语

            type

                text  文本输入

                file  传入文件  注意传入文件定要使用post方式 因为网站栏输入大小有限

            label   表单前的标语

                for:是与下面的某个表单控件的id属性进行关联
　　

BS交互
          1.form表单默认与服务器进行交互
          2.ajax技术

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--Enctype='multipart/form-data'  提交文本一定给form 设置这一段-->

    <form action="" method="get" enctype="multipart/form-data">

        <!--

            placeholder  表单内显示的灰色提示语

            label        表单前的标语

            type

                text  文本输入

                file  传入文件  注意传入文件定要使用post方式 因为网站栏输入大小有限

        -->

        <p class="user">

            <label class="user_name">用户名</label>

            <input type="text" name="username" id="username" placeholder="请输入用户名">

        </p>

        <p class="pwd">

            <label class="user_pwd">用户名</label>

            <input type="text" name="password" placeholder="请输入密码">

        </p>

        <!--文件上传-->

        <p>

            <input type="file" name="mp3">

        </p>

        <!--单选 互斥的只能选一个 checked 默认-->

        <p>

            男：<input type="radio" name="sex" value="man">

            女：<input type="radio" name="sex" value="woman" checked>

        </p>

        <!--多选-->

        <p>

        爱好：<input type="checkbox" name="love" value="eat">吃饭

              <input type="checkbox" name="love" value="sleep">睡觉

              <input type="checkbox" name="love" value="bat">打豆豆

        </p>

        <!--下拉菜单单选   selected 默认-->

        <p>

             <select name="school">

                <option value="1">小学</option>

                <option value="2">初中</option>

                <option value="3">高中</option>

                <option value="4">大学</option>

                <option selected>研究生</option>

                </select>

        </p>

        <!--描述 即文本框 可以写文字的框 cols 列宽 rows 行宽-->

        <p>

            <h3>我的描述</h3>

            <textarea name="" id="" cols="60" rows="10"></textarea>

        </p>

        <!--重置、限制输入数字等按钮等按钮-->

        <p class="register">

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

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

            <!--重置会 将所选的按钮都变为初始状态-->

            <input type="reset" value="重置">

            <!-- 只允许输入数字 -->

            <input type="number">

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

        </p>

    </form>

</body>

</html>

html-4, form 表单 输入、传文件、单选、多选、下拉菜单、文本描述、重置、submit、按钮限制输入的更多相关文章

  1. vue form表单上传文件

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js">< ...

  2. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  3. 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType

    回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...

  4. 使用form表单上传文件

    在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" ...

  5. JsonResponse类的使用、form表单上传文件补充、CBV和FBV、HTML的模板语法之传值与过滤器

    昨日内容回顾 Django请求生命周期 # 1.浏览器发起请求 到达Django的socket服务端(web服务网关接口) 01 wsgiref 02 uwsgi + nginx 03 WSGI协议 ...

  6. PHP 后台程序配置config文件，及form表单上传文件

    一,配置config文件 1获取config.php文件数组, 2获取form 表单提交的值 3保存更新config.php文件,代码如下: $color=$_POST['color']; $back ...

  7. nodejs 模拟form表单上传文件

    使用nodejs来模拟form表单进行文件上传,可以同时上传多个文件. 以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的 ...

  8. 通过form表单上传文件获取后台传来的数据

    小伙伴是不是遇到过这样的问题,通过submit提交form表单的时候,不知怎么获取后台传来的返回值.有的小伙伴就会说你不会发送ajax,其实也会.假如提交的form表单中含有文件,怎么办? 步骤1:想 ...

  9. form表单上传文件

    一.formData()直接获取form表单数据 例子:获取form表单的id给formData(),然后传给后台. 要求: 传入值的name值必须与后台接受的name相对应. form表单不能嵌套, ...

  10. ajax上传文件 基于jquery form表单上传文件

    <script src="/static/js/jquery.js"></script><script> $("#reg-btn&qu ...

随机推荐

  1. thinkphp nginx pathinfo模式支持

    最近一个项目中使用了ThinkPHP做为开发框架,URL上我们使用了PATHINFO模式,但是Nginx默认是不支持PATHINFO的,需要进行手动配置才可以,于是我们按照了以下方法进行了Nginx的 ...

  2. FCN 分割网络详解

    博客来源于:https://www.cnblogs.com/gujianhan/p/6030639.html: https://blog.csdn.net/sinat_24143931/article ...

  3. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

  4. php实现简单的流程管理

    流程管理,在各种系统中扮演很重要的地位,可以把设定好的流程放入系统中,规定好几个节点,只要所有节点都通过,就可以通过. 惯例,先看数据库: 我们首先做一个新建流程页面,先把节点做好 xinjian.p ...

  5. IDEA整合日志框架Log4j2+Slf4j详细配置过程

    日志框架这么多,他们之间到底是什么关系呢?笼统的讲就是slf4j是一系列的日志接口,而log4j2.logback是具体实现了接口功能的日志框架.现在的主流日志接口都使用slf4j,而日志的实现就见仁 ...

  6. Struts2的表单标签还可以为集合中的对象赋值

    •Struts 还允许填充 Collection 里的对象, 这常见于需要快速录入批量数据的场合   代码如下 : TestCollectionAction.java package com.atgu ...

  7. Python巨蟒全栈开发目录

    巨蟒python全栈开发-第一阶段 基础数据类型&基础 1.什么是计算机&&python的简介(待补充) 2.while循环&&格式化输出&&运 ...

  8. 巨蟒python全栈开发flask11项目开始3

    1.多玩具遥控&&websocket回锅 2.绑定玩具时添加好友的最终逻辑 3.消息&&好友列表 4.chat聊天&&对话窗口 1.多玩具遥控& ...

  9. HDU_5510_Bazinga

    Bazinga Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  10. git学习(7)标签管理

    git学习(7)标签管理 1. 建立标签 在发布版本时候,我们通常会在版本库中打一个标签,这样就唯一确定了打标签的版本,有点像个里程碑,这里会有一个指向某个commit的指针 打标签很简单,首先切换到 ...