zoukankan      html  css  js  c++  java
  • Html----表单元素

    表单元素:用于客户端和服务端进行信息交互的通道

    <form></form>:所有的表单元素都应该放在里面

    文本输入框:

    <input type="text"/>
    属性:
    name="小狗",每个表单元素都有name属性
    value="值",每个表单元素都有value属性,value值是随着用户输入而改变
    size="5",设置文本输入框的长度
    maxlength="10",最多可以输入的字符数
    placeholder="提示信息",提示
    readonly="readonly",只读

    密码输入框:

    <input type="password"/>
    name/value等属性,属性完全跟文本输入框一致

    单选框

    <input type="radio"/>
    name/value属性
    checked="checked",表示被选中

    复选框

    <input type="checkbox"/>
    name/value属性
    checked="checked",表示被选中

    下拉列表

    <select>---选择
    <option></option>---项
    </select>
    select的属性:name/value
    multiple="multiple",变成列表框(multiple:多列)
    size="2",表示显示2行
    
    option的属性:
    selected="selected",表示哪一项被选中
    disabled="disabled",表示禁止被选中
    value="值"

    ------------------------
    按钮
    普通按钮:

    <input type="button"/>
    name/value
    <button type="button">按钮</button>
    
    <button>按钮</button>
    属性:type/name/value
    type="button(按钮)/reset(重置)/submit(提交)",默认为button

    重置按钮:

    <input type="reset" value="重置"/>
    <button type="reset">重置</button>

    提交按钮:

    <input type="submit" value="提交"/>
    <button type="submit">提交</button>
    提交按钮有页面刷新的效果,同时可以将文本输入框和密码输入框的相关信息提交到地址栏上

    文件按钮:

    <input type="file"/>---只能选择文件,不能选择文件夹
    name/value属性

    图片按钮:

    <input type="image" src="图片的路径"/>
    属性:name/value/width/height

    隐藏域:

    <input type="hidden"/>

    文本域:

    <textarea></textarea>
    有name属性,没有value属性
    cols="50",设置文本域的宽度
    rows="5",设置文本域的高度

    label标签

    <label></label>
    属性: for="id名"
    <label for="admin">账号:<input type="text" id="admin"/></label> <label for="pwd">密码:</label><input type="password" id="pwd"/> label标签可以为表单元素定义,使文本和表单元素之间的关系更紧凑

    表单元素

    <form></form>
    属性: action="路径",跳转到某个页面,将表单元素里面数据提交到某个页面 method="get/post" get:会将数据显示在地址栏上 post:不会将数据显示在地址栏上

    ----------------------------
    内联框架

    <iframe></iframe>
    在当前页面中划分出一块区域用来显示另外一个页面
    属性:
    src="相对路径"
    width="1000px/80%",设置显示区域的宽度
    height="1000px/80%",设置显示区域的高度
    frameborder="1/0",1---有边框,0---没有边框
    scrolling="yes/no/auto(自动)"
    yes:表示显示滚动条
    no:表示不显示滚动条
    auto:表示自动显示滚动条

    空语义标签

    块级容器标签:<div></div>
    空语义标签:没有html属性的标签
    
    行内容器标签:<span></span>
    空语义标签

    自动换行的标签:

    1.div   2.hn   3.p   4.table   5.form    6.ul    7.li   8.ol   9.dl...

    不会自动换行的标签:

    1.span   2.i   3.b   4.font   5.u   6.s   7.img   8.input   9.select   10.button   11.a...
  • 相关阅读:
    史上最强验证
    Yii2 return redirect()
    一次线上问题引发的思考
    一次前端体验优化
    RSA For PHP
    判断是否字符串是否是JSON
    过滤Xss
    Yii2 中日志的记录
    Yii2 中禁用csrf校验
    开始。
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/7017574.html
Copyright © 2011-2022 走看看