如何寫好CSS系列之表單(form)

     表單模塊可以分為兩部分：一是表單的布局，也就是規范表單元素單元的排列位置；二是表單元素，如：輸入框、單選、復選、列表組件、搜索組件等，由於列表組件、搜索組件不是單純的css組件，所以暫且沒有實現。

一、表單布局的實現

表單布局分為：表單容器、行、表單元素組（包含元素標題、元素）。並且實現根據屏幕進行自適應。示例效果如下：

從示例效果可以看出，布局會根據瀏覽器大小實現自適應。自適應代碼如下：

@import '../mixins/breakpoints';

.f-form-container{
    @extend .border-sizing;
    margin-top: $form-row-space;
    > .f-form-row{
        display: block;   
        white-space: nowrap;
        margin: 0px;
        padding: 0px;  
        font-size: 0px;   
    }
    > .f-form-row + .f-form-row{
        margin-top: $form-row-space;
    }

    &.fluid{
        //自適應 xs = md -1
        @include media-breakpoint-max('xs'){
            .f-form-group{
                display: block;
                margin: 0px;
                + .f-form-group{
                    margin-top: get-space(lg);
                }
            }
        }
    }
}

首先對容器內部的f-form-row（表單行）進行了Magin-top的設置。然后增加了fluid類名，用於控制此表單列表是否需要支持自適應效果 。

二、表單元素的實現（部分）

表單元素只實現的input、checkbox、radio等三個基本元素類型。

2.1 input元素

   對Input元素主要實現了前綴和后綴的能力，其中前后綴中的內容可以任意寬度，現在引入的為font-awesome的web字體庫。其實check和radio的圖標也是來至於font-awesome。代碼如下：

.f-form-control{
    display: inline-block;
    width: 100%;
    padding: $form-input-padding;
    border: 1px solid $form-border-color;
    font-family: $font-family;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $radius-width-base;
    outline: none;
    resize: none;
    &:focus{
        border-color: $form-border-focuscolor;
    }
}
.f-input-addon{
    //圖標
    display: inline-block;
    font-size: $font-size;
    //line-height可以解決兩個inline-block高度不致的問題（字體類型不一樣的情況下）
    line-height: $line-height;
    padding: $form-input-padding;
    border: 1px solid $form-border-color;
    background-clip: padding-box;
    &:after{
        //解決fa與輸入框字體一致的問題
        content: '';
        display: inline-block;
    }
}

//addon position
.f-form-group{     
    &.addon-before{
        .f-input-addon{
            border-radius: $radius-width-base;
            border-right-width: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        .f-form-control{
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px; 
        }
    }
    &.addon-after{
        .f-input-addon{
            border-radius: $radius-width-base;
            border-left-width: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }
        .f-form-control{
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
    }
}

//處理input寬度占了100%的問題
.f-form-group{
    &.addon-before, &.addon-after{
        display: inline-table;
        .f-input-addon, .f-form-control{
            display: table-cell;
        } 
    }
}

其中遇到兩個比較棘手的問題處理方案：

1. addon和control兩個字體類型不致，導致在相同字體大小的情況下，兩個容器的高度表現不一致。所以我就用了行高(line-height)來解決此問題

2. 由於control默認的寬度為100%，而加入了addon之后，會導致control的寬度溢出的現象，所以我就用了table-cell來解決此問題。

2.2.  checkbox和radio元素

示例代碼只列出了checkbox的，其radio與此相同，就只改變了圖標而已：

.f-form-control{
    &.checkbox{
        > input{
            display: none;
            &:checked{
                + .checkbox-icon{
                    @extend .fa-check-square-o;
                }
            }
        }
        > .checkbox-icon{
            @extend .vertical-middle;
            @extend .fa;
            @extend .fa-square-o;
            width: 16px;
            height: 16px;
            font-size: $font-size-md;
            margin-right: get-space('lg');
        }
        > .checkbox-desc{
            font-size: $font-size;
            @extend .vertical-middle;
        }
    }
}

由於引入的為font-awesome字體庫，所以就控制了icon寬度，因為checkbox的選中與不選中的狀態，fa的web字體庫中對應圖標的寬度不一樣。

源碼下載