zoukankan      html  css  js  c++  java
  • 详解HTML中的表单元素

    代码详讲:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
    </head>
    <body>
    <form action="http://www.baidu.com">
    <label for="account">用名:<input type="text" value="zhangwen" name="username" id="account" list="xingming"><br>
    <label for="pwd1">密码:<input type="password" value="123456" name="pwd" id="pwd1" ><br>
    性别:
        <input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender">女    <br>
    爱好:
        <input type="checkbox" checked="checked" >羽毛球
        <input type="checkbox" checked="checked" >棒球<br>
        喜欢车型:<input type="text" list="cars">
    <datalist id="cars">
    <option>宝马</option>
    <option>奔驰</option>
    <option>路虎</option>
    </datalist>            <br>
        <!-- <input type="button" value="按钮" ><br> -->
        <!-- <input type="image" src=""><br> -->
        <!-- <input type="reset" value="重置按钮"><br> -->
        <input type="submit" value="提交按钮" >
        <!-- <input type="hidden" name="yincang" value="yincangshuju"> -->
    </form>
    </body>
    </html>
    注意事项:
    1.宽度和高度属性
      可以给table和td标签使用
    2.水平对齐和垂直对齐
       水平对齐可以给table和td使用
       垂直对齐只能给tr和td标签使用
    3.外边距和内边距属性
       只能给table使用
    4.表格分类
      表格的标题
      表格的表头信息
      表格的主题信息
      表格的叶尾信息
    //必须写在table标签中,紧跟在table后面
    5.单元格合并(添加td属性)
       colspan="x"水平合并X个单元格,同时删除多余的
       rowspan="x"垂直合并X个单元格,同时删除多余的
       单元格都是向后或者想下合并的
    表单部分:收集用户信息
    1.明文输入框和暗文输入框
    2.单选框:<input type="radio"> 默认情况下单选框不会互斥,若要排斥则要给每个单选框标签都设置一个name值,且要相同;
      选择默认选项:<input checked="checked">,给input添加check属性,有事可以只写checked,Xhtml中全写
    3.提交到远程服务器的要求:
      1)给form添加一个action属性,通过action属性指定需要提交的服务器地址;
      2)需要给提交到服务器的表单元素添加一个name属性
    3.hidde属性将用户的一些数据配合提交按钮默默的提交到服务器
    4.点击文字让对应的输入框对焦条件(文字和输入框绑定):
      1)将文字利用Label标签包裹起来;
      2)给输入框添加id属性;
      3)在Label标签通过for属性和输入框的id进行绑定
    5.添加待选框(实例):
           喜欢车型:<input type="text" list="cars">
    <datalist id="cars">
    <option>宝马</option>
    <option>奔驰</option>
    <option>路虎</option>
    </datalist>

  • 相关阅读:
    android listview去掉分割线
    svn 上传 过滤
    PPPOE 模拟环境搭建
    Android笔记之网络-基本了解
    ios多线程操作(五)—— GCD串行队列与并发队列
    UVa 679
    android中更改spinner、AutoCompleteTextView切割线的颜色
    Cocos2d-x中触摸事件
    全然符合package.json在CommonJS中的规范
    Hibernate实体对象继承策略
  • 原文地址:https://www.cnblogs.com/231254971a/p/7259648.html
Copyright © 2011-2022 走看看