热搜：NVER node 开发 php

五、Html表单标签_html/css_WEB-ITnose

2024-11-08 14:30:01
五、Html表单标签_html/css_WEB-ITnose

表单，表单控件的主要作用就是收集用户体验，当用户提交表单时，用户输入的内容将作为请求参数提交到远程服务器。

  • 1，form标签
    • ：创建表单，该元素不会生成可视化的界面，但是其他控件都必须放在这个标签里面。常用的属性：
    action：该属性必填，用于指定单机表单的确认按钮时表单提交到那个地址。可以是绝对地址，也可以是相对地址。
    method：用于指定提交表单时发送何种类型的请求，可以是get或者post，关于get和post这2者的区别，在我的http的博客里面 有讲到，这里不做赘述。
    enctype：用于指定对表单内容进行编码时所使用的字符集。默认地，表单数据会编码为 "application/x-www-form-urlencoded"：就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX值）
    这个属性的属性值有3种：
    application/x-www-form-urlencoded：在发送前编码所有字符（默认）
    multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
    text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
    name：该表单的唯一名称，建议和id保持一致。
    target：何种方式打开url，_self，_blank，_top，_parent。
    关于这个form标签，有一点需要强调，就是表单控件如何转换成相应的请求参数，具体的规则如下：
    1，每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数，如果有多个表单控件重复了一个name属性值，那么也只生成一个请求参数，只不过这个参数有多个值。
    2，表单控件的name属性指定了请求参数名，value指定请求参数值。
    3，如果某个表单控件设置了disabled="disabled"属性，这个表单控件不会再生成请求参数。

  • 2，input标签
    • 元素是表单控件中功能最丰富的，下面的多种输入元素都是通过这个标签来生成的。这个标签是一个空标签。
    1，单行文本框：type="text"
    2，密码输入框：type="password"
    3，隐藏域：type="hidden"
    4，单选框：type="radio"
    5，复选框：type="checkbox"
    6，图像域：type="image"
    7，文件上传域：type="file"
    8，提交，重设，无动作按钮：type="submit",type="reset",type="button"
    元素可以指定id，style，class等核心属性，同时也可以指定onclick，onfocus，onblur等事件属性，还有以下几种：
    1，checked，用于设置单选和多选是否是选中状态
    2，disabled，用于设置禁用此元素
    3，maxlength，用于指定文本框中允许输入的最大字符数
    4，readonly，只读模式，不能修改
    5，size，指定元素的宽度
    6，src，图像域显示图像的url
    7，align，图像域的对齐方式
    以下是包含上面元素的一份html： 
    表单相关标签
    单行文本框：
    不能编辑的文本框：
    密码框：
    隐藏域：
    单选：男女
    多选：男女
    文件上传域：
    图像域：
    4个按钮：

  • 3，列表框和下拉菜单
    • 到底是生成列表框还是生成下拉菜单，是由上面这2个元素来决定的。要是指定了size或者multiple，那么就生成了列表框，否则就是下拉菜单。
    ：一个选项组。label，必填，用来指定这个选项组的标签。
    以下是包含上面标签的一份html： 
    下拉相关标签
    下拉： 列表框1： 列表框2：


  • 4，使用textarea定义文本域
    • 之间的内容将作为所对应的请求参数的参数值。
    关于这个标签还是经常会用到的，在以前我写表单的时候，将单行的文本框拉长拉宽，但是我们在输入的时候也只能是一行，不能换行的，忽忽。
    以下是包含这个标签的一份html： 
    多行文本框相关标签
    单行文本框：
    多行文本框：

  • 5，使用label定义标签
    •

    本文是由用户编写整理，所有内容的版权归原作者所有。如果侵犯了您的权益，请联系我删除

    相关推荐