zoukankan      html  css  js  c++  java
  • 表单。

    表单标签及表单属性:

    在HTML5中,使用<form>标签来实现表单的创建,该标签用与在网页中创建表单区域,属于容器标签,其他表单标签需要在它的范围内才有效<input>便是其中一个。

    <form>标签的属性:

    action:此属性是指服务器上的处理表单输出的程序。语法:action="URL"如果action属性的值为空,则默认表单提交到本页。

    method:此属性告诉浏览器如何将数据发送给服务器,它指定发送给服务器数据的方法。语法:method=(get |post)。

    1.文本框:

    <form method="post" action="">

    <input name="text" type="text"/>

    </form>

    2.密码框:

    <form method="post" action="">

    <input name="password" type="pawssord"/>

    </form>

    3.单选按钮:

    <form method="post" action="">

    <input name="radio" type="radio"/>男

    <input name="radio" type="radio"/>女

    </form>

    4.复选框:

    <form method="post" action="">

    <input type="checkbox" name="1"/>聊天

    <input type="checkbox" name="1"/>玩游戏

    <input type="checkbox" naem="1"/>运动

    </form>

    5.列表框:

    <form method="post" action="">

    <select>

      <option value="1">北京</option>

      <option value="2">上海</option>

      <option value="3">农村</option>

    </select>

    </form>

    6.按钮选项:

    <button>普遍按钮,<submit>提交按钮,<reset>重置按钮。

    <form method="post" action="">

    <input type="button" value="普遍按钮"/>

    <input type="submit" value="提交按钮"/>

    <input type="reset" value="重置按钮"/>

    </form>

    7.多行文本框:

    <form method="post" action="">

    <textarea cols="40" rows="6">

    您想输入的内容:

    </textarea>

    </form>

     8.文本域:

    <form method="post" action="" enctype="multipart / form-data">

    <input type="file" />

    <input type="submit" balue="上传"/>

    </form>

    9.邮箱:

    <form method="post" action="">

    <input type="email"/>

    <input type="submit" value="提交”/>

    </form>

    10.网址:

    <form method="post" action="">

    <input type="url"/>

    <input type="submit"/>

    </form>

    11.数子:

    <form method="post" action="">

    <input type="number" min="0" max="100" step="10"/>

    <input type="submit"/>

    </form>

    12.滑块:

    <form method="post" action="">

    <input type="range" min="0" max="100" step="10"/>

    <input type="submit"/>

    </form>

    13.搜索框:

    <form method="post" action="">

    <input type="search"/>

    <input type="submit" value="GO"/>

    </form>

    14.表单的高级隐藏域:

    <form method="post" action="">

    用户名:<input trpe="text" name="name"/ >

    密码:<input type="password" name="password"/>

    <input type="submit" value="提交"/>

    <input type="hidden" value="666"/>

     </form>

    15.表单的只读和禁用:

    <form method="post" action="">

    用户名:<input trpe="text" name="name" value="张三" readonly/>

    密码:<input type="password" name="password"/>

    <input type="submit" value="提交" disabled/>

    </form>

    16.表单元素的标注:

    <form method="post" action="">

    <lebel for="male">男</lebal>

    <input type="radio" id="male"/>

    <lebel for="nv">女</lebel>

    <input type="radio" id="nv"/>

    </form>

    17.表单初级验证的方法:

    <form method="post" action="">

    <input type="search" placeholder="请输入关键字!" required/ >

    <input type="submit" value="GO"/>

    </form>

    总结:

    <input>的常用元素:

    type:此属性指定表单元的类型。     name:此属性指定表单元的名称。  value:此属性是可选属性,他指定表单元的初始值。

    size:此属性指定表单元格的初始宽度。  maxlength:此属性可以用在text和password元素中的输入最大的值。

    checked:此属性用于指定按钮是否被选中,当输入类型为radio或checkbox是使用此属性。

    <selected></selected>:列表框的默认值。

    value:规定的默认值。

    min:规定允许的最小值。

    max:规定允许的最大值。

    step:规定合法数字间隔(如step="2" 则合法(-2,0,2,4等))

    readonly: 只读,网站服务器不希望用户修改数据,只显示在表单元格。

    disabled:禁用,只有满足某个条件后,才能选用某项功能。

  • 相关阅读:
    作业
    Day2
    Day1
    让Antd 的Modal 可以拖动
    JS日期处理——月末、季度末
    前端常见问题收录
    前端面试题收录
    使用ES6 Set类型 数组去重
    小程序开发:用Taro搭建框架
    JS 树形结构与数组结构相互转换、在树形结构中查找对象
  • 原文地址:https://www.cnblogs.com/matianpeng/p/7454568.html
Copyright © 2011-2022 走看看