精华内容
下载资源
问答
  • form标签

    千次阅读 2018-03-19 19:35:55
    标签 form表单是用户可以填写信息并提交数据到服务器的控件 表单的基本语法 <form action="表单提交地址" method="提交方法"> ……文本框、按钮等表单元素…… </...

    HTML <form> 标签

    form表单是用户可以填写信息并提交数据到服务器的控件

    表单的基本语法

    <form action="表单提交地址" method="提交方法">
    ……文本框、按钮等表单元素……
    </form>

    常用属性

    • name:指定表单的名字

    • action:指定表单提交后由服务器上哪个处理程序进行处理(提交地址为空或者为”#”则提交到本页面)

    • enctpye:用于指定表单数据的编码方式

      • application/x-www-form-urlencoded:默认的编码方式,将表单控件中的值处理成URL编码方式。
      • mutipart/form-date:以二进制流的方式来处理表单数据。
      • text/plain:当表单的action的属性值为matlto:URL的形式时使用。
    • method:指定向服务器提交的方式,一般为post何get两种方式。

      get方式的请求会将请求参数的名和值转换成字符串,并附加在原URL之后,因此可以在浏览器的地址栏中看到请求参数的名和值(安全性不高),且get请求传送的数据量比较小,一般不能大于2KB。

      post方式的请求传送的数据量比较大,通常认为可以不受限制,往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输,用户在地址栏中看不到请求的参数,安全性相对较高。

      get方式经常用于搜素查询;而post常用来用户注册登录

    常用的表单元素

    • 使用input元素
    元素 方法
    单行文本框 指定<input…/>元素的type属性为text即可
    密码输入框 指定<input…/>元素的type属性为password即可
    隐藏域 指定<input…/>元素的type属性为hidden即可
    单选框 指定<input…/>元素的type属性为radio即可
    复选框 指定<input…/>元素的type属性为checkbox即可
    单行文本框 指定<input…/>元素的type属性为text即可
    图像域 指定<input…/>元素的type属性为image即可,当type=”image”时,可以指定width和height属性
    文件上传域 指定<input…/>元素的type属性为file即可
    提交、重置、普通按钮 指定<input…/>元素的type属性为submit、reset或button即可

    - input元素常用的几个属性

    属性 含义
    checked 设置单选框、复选框初始状态是否处于选中状态,只有当type属性值问checkbox或radio时才可指定(不添加此属性表示不选中,添加checkbox=”checkbox”表示选中)
    disabled 设置首次加载时禁用此元素(disable=”disalbe”)。当type=”hidden”时不能指定该属性
    maxlength 指定文本框中所允许输入的最大字符数
    readonly 指定该文本框内的值不允许修改(可以使用javascript修改)
    size 该属性时一个数字,指定该元素的长度。当type=”hidden”时不能指定该属性
    src 指定图像域所显示的图像URL,只有当type=”image”时才可以指定该属性

    - 使用button定义按钮

    ```
    <button type="按钮类型">
        普通文本、格式化文本、图像
    </button>
    
    ```
    
    button标签按钮常用属性
    - disabled:指定是否禁用此元素。该属性只能是disabled或者省略
    - name:指定该按钮的名称
    - type:指定该按钮的类型,只能是submit、reset、button
    
    • 使用实例:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    
    <!--
        表单元素的name值可以相同,以此来表示是一组元素(防止失去它们原来的功效,例如,出现单选框可以多选的情况),
        而id值只能是唯一的,是识别它们的根本区分。
    
        在表单里,添加label标签,并通过for属性指定一个元素的id值,当点击label标签内的内容时,for指定的id的元素将会获得焦点,会有更好的用户体验。
    
        对复选框来说,设置value属性以及它的值,是为了传递数据给服务器,服务器接收到复选框的数据就是value值。
     -->
    
    <body>
        <form   name="regform" action="do.html" method="post">
        <label for="username">单行文本框:</label><input type="text" name="username" id="username" maxlength="10" /><br />
        <label for="password">密码框:</label><input type="password" name="password" id="password" size="24" /><br />
        隐藏框:<input type="hidden" name="hidden" id="hidden" /><br />
        单选按钮:<input type="radio" name="sex" id="male" checked="checked" /><input type="radio" name="sex" id="female" /><br />
        复选框:<input type="checkbox" name="hobby" id="football" value="1" disabled="disabled" />足球
                <input type="checkbox" name="hobby" id="basketball" value="2" checked="checked" />篮球
                <input type="checkbox" name="hobby" id="baseball" value="3" />网球<br />
    
        <!-- src需要指定图像的路径 -->       
        图像域:<input type="image" name="image" id="image" src="img/shitu_b04.jpg" /><br />
    
        文件上传域:<input type="file" name="file" /><br />
        提交按钮:<input type="submit" name="submit" value="提交按钮" /><br />
        重置按钮:<input type="reset" name="reset" value="重置按钮" /><br />
        普通按钮:<input type="button" name="common" value="普通按钮" /><br />
        button提交按钮:<button type="submit" name="submit2"><b>提交按钮</b></button><br />
        button重置按钮:<button type="reset" name="reset2"><i>重置按钮</i></button><br />
        button普通按钮:<button type="button" name="button2" disabled="disabled">提交按钮</button><br />
    
        <br />
        <br />
        <br />
    
        <textarea name="content" cols="300px" rows="100px" readonly="readonly">这是一个多行文本框
    </textarea>
    
        </form>
    </body>
    </html>
    

    列表框和下拉菜单

    <select name="指定列表名称" size="行数">
        <option value="选项值" selected="selected">...</option>
    </select>
    • 列表框常用属性

      disabled:指定是否禁用此元素。该属性只能是disabled或者省略。
      multiple:设置该列表框是否允许多选。值为”multiple”或者干脆省略该属性。
      size:指定该列表内同时显示多少个列表项。

      列表框示例:

      <select id="city" name="city" multiple="multiple" size="3">
          <option>北京</option>
          <option>上海</option>
          <option>广州</option>
          <option>杭州</option>
          <option>天津</option>
      </select>
    • 下拉菜单实例

      <select id="city" name="city">
          <option>北京</option>
          <option>上海</option>
          <option>广州</option>
          <option>杭州</option>
          <option>天津</option>
      </select>
    • 在<select…/>元素里,只能包含两种子元素。

      • <option>:用于定义列表框选项或菜单项,它的常用属性如下:

        • disabled:指定禁用该选项,该属性值只能是disabled或者省略该属性。
        • selected:指定该列表初始状态是否处于被选中状态,值只能是selectd或者省略该属性。
        • value:指定该选项对应的请求参数值,用于传递数据给服务器。
      • <optgroup>:用于定义列表项或菜单项组,它的常用属性如下:

        • label:指定该选项组的标签。这个属性必填。
        • disabled:禁用该选项组里的所有选项,该属性值只能是disable或者省略该属性。
    • 示例

      <!-- 下拉菜单 -->
      <select id="city" name="city">
          <option>---城市列表---</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
          <option value="hangzhou">杭州</option>
      
      </select>
      
      <br />
      <br />
      
      <!-- 选项组列表框 -->
      <select id="city" name="city" size="6">
          <optgroup label="一线城市">
              <option value="beijing">北京</option>
              <option value="shanghai" selected="selected">上海</option>
              <option value="guangzhou">广州</option>
          </optgroup>
      
          <optgroup label="二线城市">
              <option value="hangzhou" selected="selected">杭州</option>
              <option value="nanjing">南京</option>
          </optgroup> 
      </select>

    多行文本框

    • 语法
    <textarea name="..." cols="列宽" rows="行宽">
        文本内容
    </textarea>
    • 常用属性

      • cols:指定文本框的宽度,该属性必填
      • rows:指定文本框的高度,该属性必填
      • readonly:指定该文本框只读。值只能是readonly或者省略该属性
    • 示例

    <textarea name="content" cols="300px" rows="100px" readonly="readonly">这是一个多行文本框</textarea>

    Example

    <!-- action表示数据提交目标页的URL method设置数据提交方式-->
    <form action="checkLogin.jsp" method="post">
            <table>
                <tr>
                    <td>学生编号:</td><td><input type="text" name="stuNo"></td>
                </tr>
                <tr>
                    <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</td><td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="登录"></td><td><input type="reset" value="重置"></td>
                </tr>
            </table>
        </form>
    展开全文
  • form标签 语法: <form action="表单提交地址" method="提交方法"> ...文本框、按钮等表单元素... </form> 不安全 一般登陆等安全信息用post请求(提交方式) 常见表单元素(表单是表单...

    form标签

    语法:

    <form  action="表单提交地址"  method="提交方法">

    ...文本框、按钮等表单元素...

    </form>


     

    不安全

    一般登陆等安全信息用post请求(提交方式)  



    常见表单元素(表单是表单元素的一个容器

    1.使用input元素


    2.input元素常用的几个属性


    3.button定义按钮

    a.语法:

    <button type="按钮类型">

    普通文本、格式化文本、图像

    </button>


    b.button标签常用的属性

     


    <label for="id">文字</label>

    点击文字可以快速选中id对应的文本框


    4.列表框和下拉菜单

    <select  name="指定列表名称" size="行数">

        <option  value="选项值"  selected="selected">...</option>

    </select>


    a.列表框的常用属性

     


    b.在<select.../>元素里,只能包含如下两种子元素

            一、<option>:用于定义列表框选项或菜单项,常用属性:

                    1.disabled:指定禁用该选项,该属性值只能是disabled或省略

                    2.selected:指定该列表初始状态是否处于被选中状态,值只能是selected

                    3.value:指定该选项对应的请求参数值

            二、<optgroup>:用于定义列表项或菜单项组,常用属性:

                    1.label:指定该选项组的标签。这个属性必填。

                    2.disabled:禁用该选项组里的所有选项,该属性只能是disabled或省略


    5.多行文本框

        1.语法

                <textarea   name="..."  cols="列宽"   rows="行宽">

                文本内容

                </textarea>


          2.多行文本常用属性

                    a. cols:指定文本框的宽度,必填

                    b.  rows:指定文本框的高度,必填

                    c.  readonly:指定该文本框只读。该属性只能是readonly或省略

    展开全文
  • 19.2.1 form标签

    2019-05-13 14:28:29
    19.2.1 form标签document.querySelector(".post-body > ul").style.display="none"19.2.1 form标签form标签用于渲染HTML表单。form标签必须利用渲染表单输入字段的其他任意标签。form标签的属性如表19.2所示。表19.2...

    19.2.1 form标签

    form标签用于渲染HTML表单。form标签必须利用渲染表单输入字段的其他任意标签。form标签的属性如表19.2所示。
    表19.2中的所有标签都是可选的。这个表中没有包含HTML属性,如methodaction

    表19.2form标签的属性
    属性描述
    acceptCharset定义服务器接受的字符编码列表
    commandName显示表单对象之模型属性的名称。默认为command
    cssClass定义要应用到被渲染form元素的CSS
    cssStyle定义要应用到被渲染form元素的CSS样式
    htmlEscape接受true或者false,表示被渲染的值是否应该进行HTML转义
    modelAttribute显示form backing object的模型属性名称。默认为command

    commandName属性或许是其中最重要的属性,因为它定义了模型属性的名称,其中包含了一个backingobject,其属性将用于填充所生成的表单。如果该属性存在,则必须在返回包含该表单的视图的请求处理方法中添加相应的模型属性。例如,在本章配套的app19a应用程序中,下列form标签是在BookAddForm.jsp中定义的:

    1
    2
    3
    4
    <!-- commandName用于指定需要的Model对象中的属性名称 -->
    <form:form commandName="book" action="book_save" method="post">
    ...
    </form:form>

    BookController类中的inputBook方法,是返回BookAddForm.jsp的请求处理方法。下面就是inputBook方法。

    1
    2
    3
    4
    5
    6
    7
    8
    @RequestMapping(value = "/book_input")
    public String inputBook(Model model) {
    ...
    //设置一个book属性到Modle之中
    model.addAttribute("book", new Book());
    //返回视图名称,也就是BookAddForm.jsp
    return "BookAddForm";
    }

    此处用book属性创建了一个Book对象,并添加到Model。如果没有Model属性,BookAddForm.jsp页面就会抛出异常,因为form标签无法找到在其commandName属性中指定的from backing object
    此外,一般来说仍然需要使用actionmethod属性。这两个属性都是HTML属性,因此不在表19.2之列。

    原文链接: 19.2.1 form标签

    展开全文
  • 本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例,还有关于form标签的action属性的定义和语法介绍,最后徐还有关于form标签的action属性的作用解释。现在让我们一起来看吧。 打造全网web前端...

    本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例,还有关于form标签的action属性的定义和语法介绍,最后徐还有关于form标签的action属性的作用解释。现在让我们一起来看吧。

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    我们先来介绍HTML中form标签的action属性的含义:

    action属性规定当提交表单时,向何处发送表单数据。(是必需的属性)

    属性值的介绍:(看图)

    熟悉了action属性的含义和语法,现在让我们来看看实例:

    下面的表单是拥有两个输入字段以及一个提交按钮,当提交表单时,表单数据会提交到名为 "form_action.asp" 的页面:

    <form action="form_action.asp" method="get">
     <p>这里输名字: <input type="text" name="fname" /></p>
     <p>接着输名字: <input type="text" name="lname" /></p>
     <input type="submit" value="Submit" />
    </form>

    效果图:(又看图)

    表单的动作属性(Action)和确认按钮

    当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

    <form name="input"
    action="html_form_action.asp" method="get">
    用户名: 
    <input type="text" name="user" />
    <input type="submit" value="点这里提交" />
    </form>

    浏览器显示如图效果

    假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

    form标签的action属性的作用解释:

    1.action=""和action="#"、没有action属性的作用相同,都是提交到当前页面(也就是document.location.href)

    2.action="http://currentPage.xxx":如果http://currentPage.xxx表示当前页面,则提交到当前页面,同事跳转到当前页面,当然就看不到url的变化;如果http://currentPage.xxx是非当前页面,则提交到非当前页面,也跳转到非当前页面

    3.表单提交到自身时 action="" 与 action="http://currentPage.xxx" 的区别:

    通常为了省事 , 我们一般将表单的 action 属性设为 action=""/action="#",或者干脆不写,但是这会造成一个问题 , 就是其实将 action 设为 action="" 时 , 表单提交时真正提交的页面是action="currentPage.xxx?arguments=values&….", 也就是如果当前页面带有参数 , 参数也一并会提交 , 而且参数的优先级会高于 <form> 控件提交的参数,即如果 action="currentPage.xxx?arguments=values&…." 中的 arguments 有与 <form> 元素名相同的时候 ,获取值时 action=”currentPage.xxx?arguments=values&….” 值会将 <form> 的值覆盖,从页得到不正确的值.

    例 : SpecTop.asp 页面是表单要提交的页面 , 且有从上级页面传递过来参数

    action="" 真正提交时的页面 : SpecTop.asp?ClassID=000100200005&SpeID=947&SpeType=3

    如果 <form> 中有 <input type=”text” name=”SpeID” value=”1000”/>, 提交时得到的值将会是 947, 而不是 1000, 而 action=”currentPage.xxx” 就能得到1000

    需要看更多内容请关注我!!!

    展开全文
  • SpringMVC form标签

    2018-04-06 21:19:52
    SpringMVC form标签 @RequiresPermissions(value={"people:student:view","people:student:add","people:student:edit"},logical=Logical.OR) @RequestMapping(value = "form&...
  • form标签输出表单

    2019-10-08 00:31:21
    form标签通常用于生成HTML里的<form>标签。 <struts:form>标签不仅生成<form>标记,还会生成<table>标记。<struts:label>、<struts:textfield>、<struts:text...
  • Spring form标签

    2014-08-16 17:43:14
    Spring标签可以分为form标签(表单标签)和普通标签   form:radiobutton    使用spring form tags必须提交导入spring form 的标签库:   &lt;%@ taglib prefix="form" uri="...
  • form标签的作用

    2021-05-12 07:59:18
    form标签用于为用户输入创建 HTML 表单 表单用于向服务器传输数据。 action通过设置submit按钮可以将表单数据传输到指定文件 规定当提交表单时向何处发送表单数据。 form 元素是块级元素 method表单数据可以...
  • antd的form组件在form标签外触发验证

    千次阅读 2020-01-14 11:21:16
    什么情况需要在form标签外触发验证呢? 有,比如新增页是个全屏弹框的自定义组件,这种组件,一般都带有 close icon ,确认,取消按钮。 那不管这种弹框的内容是什么,都是要通过确认btn去触发。 写法还是那个写法,...
  • a标签与form标签都是跳转页面。区别在与a发起的get请求。form发起的是get或post请求. 如果form表单里没有提交按钮,就没法提交表单。 form默认是get请求。get是获取内容。post是上传内容。post是想把我的东西提交至...
  • springMVC form标签

    2016-04-14 11:20:02
    ...   ...1.首先引入jsp form标签 &lt;%@ taglib prefix="from" uri="http://www.springframework.org/tags/form"%&gt;   2.开始写例子 &lt;from:form act...
  • input标签外是否添加form标签需要按情形区分:应用场景的区别:1.所有向后台提交数据(包括原生和ajax提交)的input都建议用form包裹,2.如果只是用来做前台交互效果则不推荐使用form包裹。但提交数据时,其实也可以...
  • Spring提供了form标签库,主要完成如下功能 渲染Model对象到表单 - 可以绑定一个Model对象,当Model名称变化,不需要到处修改绑定的Model名称 显示错误 ???? form标签库 - 作用 在没用form标签库之前,我需要如下...
  • form标签的属性

    2020-12-23 20:08:16
    form标签的属性method action 0926 action属性 action属性,值为一个url地址 它控制着数据提交的去处 method属性 method属性,值为get 或者 post 它控制着数据的传输方式 get 方式,数据在地址栏 post 方式, 数据...
  • SpringMvc的form标签应用

    2018-11-04 21:11:45
    SpringMvc的form标签应用 快一个月没写博客了,这一个月都有点迷。后面可以回连续补几篇。今天要讲的是springMvc里面form标签的一些应用,主要是form:checkboxes、form:select以及form:radiobuttons 的应用。 首先...
  • Html中form标签的使用

    2020-03-27 21:18:21
    当需要向服务器提交数据时,我们一般会选择使用form表单来实现数据的提交。 <form>标签用来表示一个需要向服务器提交的数据表单,在这个form表单的子标签里,需要实现让...一.form标签的使用 <form action...
  • 关于form标签

    2013-01-07 21:12:24
    今天测试的时候,需要写一个jsp,里面包括form标签,特意查了一下关于form标签,现在将查到的内容和大家分享一下。 定义和用法 标签用于为用户输入创建 HTML 表单。 表单能够包含 标签" href=...
  • HTML中的form标签

    2019-11-23 14:03:31
    form 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选...现在展示表单控件标签form中的作用: action可以不写 1、email:表示用于邮箱地址的文本字段 <form action=...
  • form 标签中有button标签时,点击button会触发form的提交表单动作,哪怕form标签什么都没定义

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,892
精华内容 7,156
关键字:

form标签