表单标签

2017-11-28

###form标签

  • <form action="" method=""></form>,其中action属性是用来提交后台的地址,method属性是提交数据 | 信息的方式,get and post是比较常见的两种方式,get不能应用于比较隐私的数据。

  • form标签是双标签,属于块标签。

  • 里面经常跟input标签一起用。

###input标签

  • 首先此标签display:inline-block;在表单这一块,属于行块标签的还有button | textarea | select,都属于行块标签,我们可以设置宽高。

  • input标签属于单标签,规范要闭合使用。

  • input有很多属性,<input type="text" name="" value="" id="" placeholder="">,这个标签有默认样式,border: 2px solid black; padding: 1px;使用时记得重置。其中placeholder属性是类型为text的文本框没输入内容时的提示文字。

  • 它的类型有password密码型 | number数字型 | radio单选框|checkbox复选框|submit提交按钮|reset重置按钮,后两个有默认的value值,需要重置。

  • 与它一起使用的还有`

  • 还有select标签和option标签,这是一组合标签,双标签。下拉框选项。

  • textarea文本框标签,一段文本区域,可以拉动它的大小,可以设置resize="none | auto |both来设置可拉动选择。<textarea col="" row="" ></textarea>

  • 另外在做表单练习的时候,还遇到了input框的聚焦失焦事件。
    <input type="text" name="" placeholder="" /> 可以在样式表中用input:focus{}进行设置,也可以用js函数进行处理。
    ###input.onfocus=function(){设置…},聚焦设置
    ###input.onblur=function(){设置…},失焦设置

聚焦和失焦事件的设置

###输入内容时的小叉号的出现

输入事件

函数设置

拓展