• form表单


    表单属性

     HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。

    属性:action、method、enctype

        action  表单要提交的地址,用于处理表单的内容(一般是提交字典到后台的一个接口,这个接口是java写成的,提交到这个接口后后台就知道如何处理这些数据了)。

        method  提交的方法,默认是get方式提交。

                  get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

                  post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

        enctype  对表单数据进行编码,默认都是要编码的。格式为:application/x-www-form-urlencoded(表单默认的编码格式,表单发送前对所有字符进行编码。编码规则:空格转换为“+”号,特殊符号转换为ASC HEX值)。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时,编码就需要采用另一种格式:multipart/form-data(不对字符编码,文件上传时使用)。text/plain(是一种纯文本编码,空格转换为“+”号,但是不对特殊字符进行编码)。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
            <form action="https://www.baidu.com/s">
                <input type="text" name="wd">
                <input type="submit" value="百度一下">
            </form>
    </body>
    </html>
    百度搜索实例

    表单元素

    <input> type 属性:

            text  文本框输入(默认text文本框类型)。

                autocomplete(自动完成输入的内容,要求表单元素要有name属性才有自动完成的效果,off表示自动完成不可用,on表示自动完成可用)

                disabled(设置或者获取控件的状态,默认是false即可用,等于true时不可用,不能输入内容)

        password  密码框。(以下属性text和password共有)

                size(指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位,对于其他元素,宽度以像素为单位)

                maxlength(type为text或password时,表示输入的最大字符数),有利于防止sql的注入攻击

                readonly 只读. 

          placeholder 框内预置内容(灰色),写上内容时才消失

            radio  单选按钮。属性:

                 name(将name的值设置为相同值,才表示一组数据,才能实现单选功能)

                 value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

                 checked(是否被选中的状态)

            checkbox  复选框。

                 name(名字一定要一样一样的,才表示是一组数据,添加到同一value值列表提交到服务器)

                 value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

                 checked(是否被选中的状态)

            file  文件域,上传文件(不同的浏览器表现形式不同)

        submit  提交按钮。用于提交表单。

        reset  重置按钮。清空表单的输入,恢复到表单默认的状态。

            button  普通按钮。一般结合javascript使用。

        image  图片按钮,用来提交表单,与submit是一样的效果。

                 src(图片路径)

        hidden  隐藏字段。

                 value(隐藏的内容)

        color  颜色标签。value指定颜色值(采用#十六进制数表示)。

        date  日期。value值指定默认的日期,格式为****-**-**(年月日)。

        datetime-local  显示本地时间,value值指定默认的时间,格式为2016-05-20T11:10:10(年月日T时分秒)。 

        number  数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。

        range  滑动标签。min(指定最小值)、max(指定最大值)、value(指定当前默认值)。

        week  每年的周数。value指定哪一年第几周,格式为2016-W25(2016年第25周)。

    <textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。

            name (表单提交项的key)

        cols(设置文本域宽度)

            rows(设置文本域高度,即行数)

    <select> 下拉框标签。使用时要结合<option>子标签一起使用。

            name:表单提交项的key

            size:选项个数

            multiple:多选

            <option> 下拉选中的每一项

      •   value(表单提交项的值)
      •   selected(selected下拉选默认被选中)

            <optgroup>为每一项加上分组

    <label> 把元素与文本结合起来

    友好设计:不只是选中复选框才能选中并打钩,要求点击对应的文字也能选中该复选框。
    这种情况下要用到<label>标签的for属性(设置或获取给定标签对象指定到的对象,值=另一个元素的id号即可)

    1
    2
    <label for="name">姓名</label>
    <input id="name" type="text">

    <fieldset> 对表单中的相关元素进行分组

    1
    2
    3
    4
    <fieldset>
        <legend>温馨提示</legend>
        <div align="middle">不要忘记点赞哦 ==</div>
    </fieldset>

      

    value: 表单提交项的值

    对于不同的输入类型,value 属性的用法也不同:

    • type="button", "reset", "submit" - 定义按钮上的显示的文本
    • type="text", "password", "hidden" - 定义输入字段的初始值
    • type="checkbox", "radio", "image" - 定义与输入相关联的值
  • 相关阅读:
    http
    VUE-1
    AJAX
    html常用标签
    CSS网页布局
    概念整理3
    SEO
    概念整理2
    var
    概念整理
  • 原文地址:https://www.cnblogs.com/liangdong/p/10229428.html
Copyright © 2020-2023  润新知