zoukankan      html  css  js  c++  java
  • HTML表单处理用户输入

    1.HTML表单用于收集用户输入。通过<form> </form>标签定义

    2.<input> 元素是最重要的文本元素。

    2.1.text定义常规文本输入,password定义密码字段

    <form >
    User name:<br>
    <input type="text" name="userid">
    <br>
    User password:<br>
    <input type="password" name="psw">
    </form>

    2.2.radio定义单选按钮输入,checkbox 定义复选框

    <form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
    </form>
    
    <form >
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    </form

    2.3.submit定义提交按钮(提交表单)

    <form action="/demo/demo_form.asp" method="GET">
    <input type="submit" value="Submit">
    </form> 

    action 属性定义在提交表单时执行的动作。指定了某个服务器脚本来处理被提交表单
    method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
    GET(默认方法):适用于没有敏感信息。表单数据较少(表单数据在页面地址栏中是可见的)

    2.4.<input type="number"> 用于应该包含数字值的输入字段。

    <form>
    Quantity:
    <input type="number" name="points" min="0" max="100" step="10" value="30">
    </form>

    2.5.<input type="date"> 用于应该包含日期的输入字段。(month,week,time)

    <form>
    Birthday:
    <input type="date" name="bday">
    </form>

    2.6.<input type="color"> 用于应该包含颜色的输入字段。

    2.7.<input type="range"> 用于应该包含一定范围内的值的输入字段。

    <form>
    <input type="range" name="points" min="0" max="10">
    </form>

    2.8.<input type="email"> 用于应该包含电子邮件地址的输入字段。
    2.9.<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。

    3.<select> 元素下拉列表

    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

    4.<button> 元素定义可点击的按钮

    <button type="button" onclick="alert('Hello World!')">Click Me!</button>


    5.Input 属性
    value 属性规定输入字段的初始值
    readonly 属性规定输入字段为只读(不能修改)
    disabled 属性规定输入字段是禁用的
    size 属性规定输入字段的尺寸(以字符计)

  • 相关阅读:
    Luogu P6623 [省选联考 2020 A 卷] 树|Trie
    Luogu P4683【IOI2008】Type Printer 打印机|trie
    Luogu P5658 括号树|搜索+递推
    Luogu P4514 上帝造题的七分钟|二维树状数组
    Luogu P1314 【NOIP2011】聪明的质检员|前缀和+二分
    Html5表单元素
    HTML5视频音频
    HTML5语义化标签
    斗地主案例
    Collection集合
  • 原文地址:https://www.cnblogs.com/corolcorona/p/7257578.html
Copyright © 2011-2022 走看看