表单标签及其他

  • 首先补充上节表格标签的知识：
    • 细线表格：
      <table bgcolor="black" cellspacing="1" width="30" height="20">
      <tr gcolor="white">
      <td> </td>
      </tr>
  • 表格合并：(第一行后两个水平合并 第二行第三行第一个单元的垂直合并)
    <table bgcolor="black" cellspacing="1" width="30" height="20">
    <tr gcolor="white">
    <td></td>
    <td colspan="2"> </td>

    </tr>
    <tr gcolor="white">
    <td rowspan="2"> </td>
    <td> </td>
    <td> </td>
    </tr>
    <tr gcolor="white">

    <td> </td>
    <td> </td>
    </tr>
  • 表单标签：
    <form>
    明文输入框：<input type="text" name="xxx" value="设置默认值">
    暗文输入框：<input type="password" name="xxx" value="设置默认值">
    单选框：<input type="radio" name="xxx" checked="checked ">
    <input type="radio" name="xxx" >（必须有相同的name，才会互斥,checked 设置默认值,且只能设一个。）
    双选框：<input type="checkbox" name="xxx">
    <input type="checkbox" name="xxx" checked="checked ">
    <input type="checkbox" name="xxx" checked="checked ">
    </form>
  • label 标签（用来绑定文字和框，具有关联性）
    <form>
    <label for="aaa">
    <input type="text" name="xxx" id="aaa">
    </form>
  • 按钮/图片按钮/提交按钮/重置按钮
    <form>
    <input type="button" name="xxx">按钮
    <input type="image" src="xxx照片" name="xxx" >图片按钮
    <input type="submit" name="xxx">提交按钮 （用value可以改变名称）
    <input type="reset" name="xxx">重置按钮（用value可以改变名称）
    </form>
  • 隐藏域：
    <form>
    <input type="hidden" name="xxx">
    </form>
  • 取色器/电话/邮箱/日期
    <form>
    <input type="color" name="xxx">
    <input type="number" name="xxx">
    <input type="email" name="xxx">
    <input type="date" name="xxx">
    </form>
  • 数据列表：(绑定待选列单)
    <form>
    <input type="color" name="xxx" list="bbb">
    <datalist id="bbb">
    <option>xxx</option>
    <option>xxx</option>
    </datalist>
    </form>
  • 多行文本编辑：
    <form>
    <textarea name="sss" cols="30" rows="10">简介：鹿晗（LU HAN），1990年4月20日出生于北京海淀区=</textarea>
    </form>
    想这个文本框不可拉伸，则在head中加：
    <head>
    < style>
    textarea{
    resize:none;
    }
    </ style>
    </head>
  • 下拉列表;
    <form>
    <select>
    <option selected="selected"(设置默认值)>xxx</option>
    <option>xxx</option>
    </select>
    </form>
    若想分组，则：
    <form>
    <select>
    <optgroup label="xx分组名称">
    <option selected="selected"(设置默认值)>xxx</option>
    <option>xxx</option>
    <optgroup label="xx分组名称">
    <option selected="selected"(设置默认值)>xxx</option>
    <option>xxx</option>
    </select>
    </form>
  • 其它标签;
    • video(视频) (3种播放格式：mp4/ogg/webm)
      有属性：autoplay 自动播放
      controls 控制条
      loop 循环播放
      muted 静音
      poster 视频没开始时可以显示图片
      width/height
      2种方式：
      1.<video src="xx视频地址" type=""></video>
      2.<video>
      <source src="xx视频地址" type="video/mp4">
      <source src="xx视频地址" type="video/ogg">
      <source src="xx视频地址" type="video/webm">
      </video>
    • audio(音频)
      有属性：autoplay 自动播放
      controls 控制条
      loop 循环播放
      muted 静音
      (poster /width/height不能用）
      2种方式：
      1.<audio src="xx音频地址" type=""></audio>
      2.<audio>
      <source src="xx音频地址" >
      </audio>
    • 详情/摘要标签
      <details>
      <summary>摘要信息</summary>
      详细信息
      </details>
    • marquee 跑马灯效果
      属性：behavior 滚动的类型（slide 碰到边界停止 alternate 碰到边界弹回 ）
      direction 滚动的方向 （left 由右向左 right up 由下到上 down）
      loop 滚动的次数
      scrollamount 滚动的速度 （1最慢）
      固定格式：
      <marquee>内容</marquee>
      图片滚动固定格式：
      <marquee>
      (title/alt/width/height)
      </marquee>
    • 新增及废弃的标签：
      废弃的：br/hr/b/u/i/s/font
      新增的： strong/ins/em/del
      (strong 重要强调的语义，加粗
      ins 插入，植入的语义，斜体
      em 强调的语义，斜体
      del 被删除的语义，删除线 ）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容