zoukankan      html  css  js  c++  java
  • HTML表单的应用

    HTML中的表单

    表单是一个包含表单元素的区域。

    表单元素是允许用户在表单中输入内容,

    表单的作用是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具,人机交互。

    表单用<form>标签表示

    基本结构:

    <form action="" name=""></form>
    属性名 属性值 说明
    name 字符串 给表单命名
    method  get 表单传输方式

    将表单数据以名称/值对的形式附加到 URL 中(可见)

    post

    将表单数据附加到 HTTP 请求的 body 内(数据不显示在 URL 中)安全

     action  url  传输目标地址

    enctype

    application/x-www-form-urlencoded
    multipart/form-data (发送文件)
    text/plain

    规定在向服务器发送表单数据之前如何对其进行编码。

    (适用于 method="post" 的情况)

    表单元素类型

    通用格式(除textareaselect

    <input  type=”类型”   name=””  value=””>

    两个属性:name   value   非常重要,在后期需要赋值与调取

     一、文本类型

        1、文本框   ---text

                         1>不可操作        ---disabled  (属性名与属性值相同的可只写属性名)

                         2>只读           --readonly

                         3>默认提示字        ---placeholder   placeholder =””)

        2、密码框   ----password

        3、隐藏域   ----hidden

        4、多行文本   ----textarea

              特殊格式

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

    多行文本框可随意拖动 添加resize:none属性,禁止拖动
    二、选择类型
       1、单选    ---radio
    <input  type="radio">内容

            1>不可操作-   --disabled

            2>默认选中     -checked

            只能选择一个时,需要在input属性中添加name属性,并添加相同的属性值

           label 标签,点选时,可扩展到文字,不必只能点击圆点。input标签放在label标签内。

             2、 多选    ---checkbox

    <input  type="checkbox">内容

            默认选中项加属性     -checked

           3、下拉框     ---<select> <option>

           1>默认选中   selected   (是option的属性)

           2>全部显示   multiple   (是select的属性)  

           3>显示多条   size       (是select的属性) (size=”数字”)

    特殊格式:下拉框(组合标签)

    <select  name="" id="">
        <option value="">内容1</option>
        <option value="">内容2</option>
    </select>

       下拉框的值,就是option里的value值,如果option里没有value属性,就是option内容

    三、按钮类型

         1、普通按钮     ---button

    <input  type="button" value="内容">

      2、提交按钮    ---submit        (提交到form表单的内容,只在form内有效)

         也可以直接用   <button> </button>

      3、复位按钮   -----reset        (清空form表单内的内容,form外的无关)

    四、文件类型  ---file

        上传栏位:<input type="file" name="file">

        需要在form中添加属性enctype="multipart/form-data"

    五、图片类型

          图像按钮:<input type="image" src="url" alt="文本">

    表单加上外框和标题

    :<fieldset>...</fieldset>  

    标  题:<legend>...</legend>

    补充:

    格式化标签<pre></pre>,里面内容与书写一致,显示空格、回车等

  • 相关阅读:
    【Java8新特性】你知道Java8为什么要引入Lambda表达式吗?
    你说你懂计算机网络,那这些你都知道吗
    程序员需要了解的硬核知识之控制硬件
    程序员需要了解的硬核知识之汇编语言(全)
    真的,Kafka 入门一篇文章就够了
    程序员需要了解的硬核知识之汇编语言(一)
    带你涨姿势的认识一下 Kafka 消费者
    程序员需要了解的硬核知识之操作系统和应用
    详解Kafka Producer
    程序员需要了解的硬核知识之操作系统入门
  • 原文地址:https://www.cnblogs.com/dk2557/p/9140724.html
Copyright © 2011-2022 走看看