美文网首页
表单的基础知识

表单的基础知识

作者: ZombieBrandg | 来源:发表于2018-06-04 23:08 被阅读0次

    在 HTML 中,表单是由 form 元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型。HTMLFormElement 的属性和方法。

    acceptCharset: 服务器能够处理的字符集;等价于 HTML 中的 accept-charset 特性。
    action: 接受请求的 URL;等价于 HTML 中的 action 特性。
    elements: 表单中所有控件的集合(HTMLCollection)。
    enctype: 请求的编码类型;等价于 HTML 中的 enctype 特性。
    length: 表单中控件的数量。
    method: 要发送的 HTTP 请求类型,通常是"get"或"post";等价于 HTML 的 method 特性。
    name: 表单的名称;等价于 HTML 的 name 特性。
    reset(): 将所有表单域重置为默认值。
    submit(): 提交表单。
    target: 用于发送请求和接收响应的窗口名称;等价于 HTML 的 target 特性。

    <!-- 通用提交按钮 -->
    <input type="submit" value="Submit Form">
    
    <!-- 自定义提交按钮 -->
    <button type="submit">Submit Form</button>
    
    <!-- 图像按钮 -->
    <input type="imgage" src="xxx.jpg">
    
    <!-- 通用重置按钮 -->
    <input type="reset" value="Resrt Form">
    
    <!-- 自定义重置按钮 -->
    <button type="reset">Reset Form</button>
    
    <div>
        <label for="username">姓名</label>  
        <input id="username" name="username" type="text">   
    </div>
    <div>
      <label for="age">年龄</label> 
      <input id="age" name="age" type="text">  
    </div>
    
    //等价于
    
    <div>
      <label>
        姓名
        <input name="username" type="text">
      </label>
    </div>
    <div>
      <label>
        年龄
        <input type="text" name="age">
      </label>
    </div>
    

    当点击姓名和年龄时,文本框就会被选中,两个方法都可以获得同样的效果,通常使用后一种。

    相关文章

      网友评论

          本文标题:表单的基础知识

          本文链接:https://www.haomeiwen.com/subject/uyeusftx.html