zoukankan      html  css  js  c++  java
  • 第二十节-重要表单(form 与 input) 、label 标签

    网页中 搜索框 或者注册单都是用表单元素来做的

    form: 三个属性  1.action: 提交地址(目前写#练手)     2.method:提交方法:get/post, get提交会将键值对显示在网址不安全,post则不会     3.target: 可写_blank,在新网页打开。4.name 如果写这个属性,那么值就不可空,且要独一无二,还要与表内容契合

    form 的子元素:input(行内元素,但具有行内块属性)

    input:三个属性  1.type(类型)    2. name   3.value       (name 与 value组成键值对 传递给 后端,后端会告诉前端对name value有什么规范的,name是键名,value是键值)

     (搭配label效果更好)                          4.placeholder(占位)

            一般需要给后台传数据才会用name

            type种类:1.text <input type="text" name="文字“ value="我是内容">

                             2.radio(单选框)    <input type="radio" name="女人” value="1" id="1"><label for="1"> 女人</label>

                             3checkbox(多选框)  <input type="checked" name="女人” value="1" id="1"><label for="1"> 女人</label>

                                         label配合单选框 多选框使用,把文字放在label,点击文字或者按钮都可以,以此提升用户体验

                                        disabled :禁用   checked: 默选

                                                            <input type="radio" name="女人” value="1" id="1" checked ><label for="1"> 女人</label>

                            4.reset(重置按钮,点击清空form内容)

                                                            <input type="reset" value="重置表单">

                            5.submit(提交按钮)  <input type="submit" value="提交">

                            6.password(密码)    密码:<input type="psaaword" name="password">

                            7.button(按钮)      <input type="button“ value="普通按钮">

                                  与button区别:button自带提交效果           <button>你</button>

                            8.现在用不到:image与file    <input type="image" src="">(一般给input背景图片带代替type="image")

                                                                        <input type="file">

                            9.hidden标签, <input type="hidden" name="" value="">   用户看不到的标签。

                                                           

  • 相关阅读:
    koa2 + webpack 热更新
    koa2在node6中如何运行
    浅拷贝和深拷贝的理解和实现
    angular2多组件通信流程图
    angular2 表单的理解
    ssh-add Could not open a connection to your authentication agent.
    outlook同步异常
    ctrl+c ctrl+d ctrl+z 的区别和使用场景
    grep 详解
    mysql 事务隔离级别 详解
  • 原文地址:https://www.cnblogs.com/yzdwd/p/12152505.html
Copyright © 2011-2022 走看看