前端-html表单

表单是啥？

 

        form是一个表单，是为了收集数据的、是一个看不到的东西。需要提交的数据必须放到表单中，这样才能一一对文本内容进行校验。

       

表单两个属性

             action :提交到服务器的位置 或是路径   action="#" 表示当前页面

             method：提交方式有7种，但是常用的为两种 get和post

                       

get方式：

1.1 参数会以键值对的方式拼接到地址栏后面   key=value

1.2 多个参数以& 的方式进行连接

1.3 第一个参数会以?的方式连接

1.4拼接长度有限

      

post方式（开发中常用）：

1.1 地址栏不会进行拼接

1.2 长度不限

 

表单中的标签 input

 

               属性：

                         userName：相当于key

                        value：   相当于value

       hidden:隐藏name和value 不想给用户看的数据，将会在隐藏域中

                 

       input[type='password']{

            background-color:red //设置背景色

       } 

        背景色：  background-image:url();

         边框线： border： 1px solid blue;

                     

         之前一直不明白，标签中有id不就行了，为什么还需要name和value呢？我们提交数据的时候，提交的数据将在地址栏上显示，需要用userName=value的方式表示，如果没有设置name地址栏的数据是无法显示的，相当于没有对数据进行提交。

            常用的type

       type=“”button、sumit、radio、checkbox、text、hidden、reset、

       单选框只进行单选 必须设置同样的name 进行默认选择：checked=“checked”

   验证码

                       验证码：<input type="text" /> <inputtype="image" />

                                       

                       验证码：<input type="text" /> <inputtype="image" src="../img/captcha.jpg"/>

                              

设置文本框长度方式

          size：40； 文本长度扩大两倍，如果是在style属性中设置，要设置width。

          maxlength     可输入最大长度

          readonly ：是否只读 readonly="readonly"

   disabled:  是否可用 disabled="disabled"

          注册按钮 类型必须是 type="submit"，才能提交整个表单。

选择框：<select>

<select  name="mySelect"  multiple="multiple"> <option value="0">选择一</option> <option value="1">选择二</option> </select>

总结：

       做一个系统一般都是从登录开始的，登录少不了表单的校验。知识点在反复中有了新的认识，也有了新的了解。