zoukankan      html  css  js  c++  java
  • html表单元素概览

      当谈到页面上的表单时,相信大家都不陌生了,注册登录什么的都要与表单打交道,现在让我们来看一下表单中最常见的标签用法.

    1.单行文本域(Text Field)

    <label>First Name</label>
    <input type="text“ name="firstname"/> <br/>
    <label> Last Name </label>
    <input type="text" name="lastname"/>
     类型为text,name属性值一般与前面label标签意思相近,做到见名知义。
     

    2.多行文本框(Text area)

    <textarea name="description" readonly="readonly" rows=3 cols=40>
      早上十点起床,泡制一壶新鲜的热咖啡,阅读报纸至中午,吃午餐,上画画/网球/kick
    boxing课,看书,看《friends》,玩 Guitar Hero(电视游戏),再看书,睡觉
    </textarea>

      cols和rows属性分别指定文本宽的可见宽度与长度。readonly属性定义该文本宽只能读。


    3.密码域(Password field)

    <label>Password</label>
    <input type="password" name="password"/>
     输入的文字是不明的,只以点好显示。

    4.单选按钮(Radio Button)
       当用户从若干给定的的选择中选取其一时,就会用到单选框。

    <input type="radio" id="male" name="gender" value="Male" checked="checked"/>
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="Female" />
    <label for="female">Female</label>
     label的for属性值input中的id值,一旦触发了该label标签,浏览器就会自动将焦点转到和标签相关的表单控件上。

    4.复选框(CheckBox)
       当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框.

    <input type="checkbox" name="color[]"  id="green"  value="green" />
    <label for="green">green</label>
    <input type="checkbox" name="color[]" id="red" value="red"/>
    <label for="red">red</label>
    <input type="checkbox" name="color[]" id="blue" value="blue"/>
    <labe for="blue">blue</label>
     记住name一定要为数组,因为用户可能选择多个,必须用数组来保存多个value值。

    5.下拉列表(Select)
       select可以创建单选或多选菜单。
    单选下拉列表:
    <select name="sport">

    <option value="football">football</option>
    <option value="baskeball">basketball</option>
    <option value="baseball">baseball</option>
    </select>

      option定义一个选项值,value指定发送到服务器上面的值.

    多选下拉列表:
    <select multiple="multiple" name="colors[]" size="5">
    <option value="red"> red</option>
    <option value="green"> green </option>
    <option value="black">black</option>
    <option value="blue">blue </option>
    <option value="orange">orange</option>
    </select>

      单选列表添加multiple="multiple"属性就变成多选列表了,这时name一定要改为数组存储多个值,size属性定义可见选项的数目,一般很少用。需要说明的是,需用户按键盘来配合。
    • 对于 windows:按住 Ctrl或shift 按钮来选择多个选项
    • 对于 Mac:按住 command 按钮来选择多个选项

    6.按钮(button)

    <input type="button" value="clickbutton"/>

      用法很简单, 一般你想置入少量不可更改的信息时会用到。

    7.文件(file)
       想让用户上传文件时,这个就用到了。

    <input type="file" value="uploadfile"/>

        用到这个form必须设置属性method="post" enctype="multipart/form-data" 才行;


    8.提交和重置(submit reset)

    <input type="submit" name="submit" value="提交" />
    <input type="reset" value="重置" />
     submit将数据提交到服务器,reset重置表单。

    基本上常用的表单都写了,在写时注意一点:input单标签一定要关闭
  • 相关阅读:
    SQlServer 从系统表 sysobjects 中获取数据库中所有表或存储过程等对象
    Win7 Print Spooler服務自动关闭
    C# 数据流操作 Stream 相关
    GRUB引导故障解决
    RAID配置层+配额
    磁盘一
    权限管理及归属
    cenos7关闭防火墙 安全机制
    linux用户管理-----账号管理和权限归属设置
    yum 仓构建,源代码安装
  • 原文地址:https://www.cnblogs.com/youxin/p/2350975.html
Copyright © 2011-2022 走看看