form表单的总结

form表单的总结

form表单是给人填写信息的载体，由多个组件构成

form 属性： action: 是提交表单的地址

            method: 规定提交的方式，提交方式有get提交和post提交。

                   get提交会暴露密码在浏览器网址的后面，post提交不会

            name: 表单的名称。

                             1.<input>

input 属性：type: 规定input元素的类型，有以下几种类型

                   button：具有按钮的功能

                           代码：<input type="button">

                                   <style>

                                       input{

                                               width: 100px;

                                               height: 40px;

                                               background: #051CD0;

                                             }

                                   </style>

                           效果图：

                                  

                   checkbox：制作选项按钮

                           代码：

                                   <input type="checkbox">

                                   <label for="">小学生</label>

                                   <input type="checkbox">

                                   <label for="">中学生</label>

                                   <input type="checkbox">

                                   <label for="">大学生</label>

                           效果图：

                                  

                   radio: 制作单选按钮

                           注：要把input的name值设置成一样才可以

                           代码：     

<input type="radio" name="xingbie">

                                   <label for="">男</label>

                                   <input type="radio" name="xingbie">

                                   <label for="">女</label>

                           效果图

                                  

                   text: 制作文本框  

                          代码：

<input type="text">

                              效果图：

                                  

                                   注：改变文本框的value等于改变了文本框里面的文本。

label与input结合使用：当label的for值等于input的id值时，你点击label，input会有一个聚焦的效果。

代码：<label for="wenbeng">姓名 ：</label>

<input type="text" id="wenbeng">

      效果图：

                             2.<textarea>

textarea 属性： cols：设置文本域的宽度。

                row：设置文本域的高度。

                代码：<textarea name="" id="" cols="50" rows="6"></textarea>

                效果图：

                      

                                    3.<select>

select是一个下拉框。

            代码：<select name="" id="">

                    <option value="篮球">篮球</option>

                    <option value="羽毛球">羽毛球</option>

                    <option value="足球">足球</option>

                  </select>          

      效果图：

             

上面所述这是我对form表单的总结