(表单、表单的元素、表单的属性)

风格不统一 提交于 2020-01-03 07:53:33

表单:

   标签名:

                1、form (表单)  action(路径 )  method (提交方式)

                2、method       (提交方式)

                ( get提交 ) 在路径后面加参数    ;   显示的是  ?name=123&age=123

                 注意: 键中不要加空格,加空格后所显示的就不是想要的数值了     ?name=123&age=123   ?name  =123&age=123

                            值不要加引号,同样的加引号后得到的数值就不同了     ?name=123&age=123       ?name=“ 123 ”&age=123

                ( post提交 )这种提交方式比较安全,不会在路径中显示想要的数值, 在请求信息里面加参数

  表单元素:

                 文本框属性

     这三点对文本框,密码框,多行文本都有用,

               { 一、placeholder=“ 文本框 ”  就是文本框里显示的数值,比如现在输入的是文本框,显示的就是文本框,输入其他的时候就消失了。

                 二、disabler  不能操作其中的东西,但是有光标

                 三、 readonly 只读,不能输入,没有光标。}

              1、文本框类型

                   (1)文本框:text

                   (2)密码框:password

                   (3)隐藏域:hidden

                   (4)多行文本 :texarea

              2、按钮类型     disabled 不可操作,对按钮建都有用,只看则没用

                   (1)提交: submit、  button标签也是提交的意思

                   (2)复位: rest

                   (3)普通:button

               3、选择类型     disabled 不可操作有用,只看则没用。

                     label 标签  将文字刻选择标签相关联
                     用法1:将选择标签包起来。

                     用法2:label标签的for属性的属性值是选择标签的id值。

                                 然后将选择标签代表的意思放到label标签的内容位置。

                   (1)单选:radio

                           checked   默认选中  

                   (2)多选:checkbox

                           checked    默认选中

                   (3)下拉:select    option  兄弟标签

                           muliple  多选属性  默认展开全部选项  是select的属性

                           size    默认展开显示几个选项    是select的属性

                           selected 默认选中                是option的属性 

               4、文件类型     (1)file   form必须加属性      enctype=“ multipart/form-data”

               5、图片类型     (1)image

               6、表单元素的通用写法

               < input   type=“类型”      name=“  ”    value=“   ”>

               name:在表单中和value是键值对

                           在单选多选中有分组的意思

                7、表单的特殊元素

                   (下拉)

                        < select   name=“ ”  id=“ ”>

                              < option  value=“ 中的数值和后面的选项1相对 ” >选项1< /opion>

                              < option >选项2< /option >

                              < option  value=“ ” >选项3< /opion >

                        < /select >

                        value : option里面有value属性那就是属性值

                                    option没有value属性 那就是属性值

                   8、多行文本

                       < textarea  name=“ ”  id= “ ”  cols= “宽 ”  rows= “ 高 ”  >

                                 内容就是value 值

                        < /textarea >

         <!-- form 表单标题-->
   <form action="guowy.html" method="post" ><br />
   <!--文本框账号 不可操作-->                       <!--不可操作--> <!--文本框默认值-->
     账号:<input  type="text" name="" value="" disabled   placeholder="你奶奶" /><br />
     
     
     <!--密码框 只读-->                                              <!--只读-->
     密码:<input  type="password" name="" value="" readonly /><br />
     <!--隐藏域-->
         <input type="hidden"  readonly="readonly"/><br />
     <!--选择类型  单选-->
         <label>
           <input type="radio" checked="checked" name="9" />男
         </label>
           <input  id="oo" type="radio" name="9" />
           <label for="oo">女</label><br />
     <!--选择类型  多选-->
       爱好:<input type="checkbox" />吃饭
            <input type="checkbox" />睡觉
            <input type="checkbox" />打豆豆<br />
    在哪睡觉:<input type="checkbox" />床
            <input type="checkbox" />沙发
            <input type="checkbox" />地板<br />
      <!--下拉  selected默认显示这一选项-->
   在哪打游戏:<select name="" id="" multiple size="2">
                <option value="">家</option>
                <option value="" selected >网吧 </option>
                <option value="">别人家</option>
             </select><br />
       <!--多行文本-->
       个人简介:<textarea name="" id=""></textarea><br />
       <!--文件类型-->
             <input type="file" /><br />
       <!--图片类型-->
             <input type="image" src="img/2.png" />
       <!--普通按钮 只是一个按钮的样子 并没有提交的效果-->
             <input type="button" value="提交" />
        <!--复位按钮-->
             <input type="reset" readonly="readonly" />
        <!--提交按钮-->
            <button>登录</button>
   </form>

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!