Các loại form sử dụng

Thanh filter

Xem code

<div class="filter">
    <div class="ui  form small">
        <div class="fields">
            <div class="field">
                <label>Chọn hệ thống</label>
                <select class="ui dropdown">
                    <option value="">Chọn hệ thống</option>
                    <option value="1">Administrator</option>
                    <option value="2">WEBVTA</option>
                    <option value="3">VNPOST</option>
                </select>
            </div>
            <div class="field">
                <label>Chọn chương trình</label>
                <select class="ui search dropdown">
                    <option value="">Chọn chương trình</option>
                    <option value="1">Administrator</option>
                    <option value="2">WEBVTA</option>
                    <option value="3">VNPOST</option>
                </select>
            </div>
            <div class="field">
                <label>Chọn vị trí</label>
                <select class="ui search dropdown">
                    <option value="">Chọn vị trí</option>
                    <option value="1">Administrator</option>
                    <option value="2">WEBVTA</option>
                    <option value="3">VNPOST</option>
                </select>
            </div>
            <div class="field">
                <label>Chọn ngày</label>
                <div class="ui left icon input">
                    <input type="text" class="datepicker">
                    <i class="calendar icon"></i>
                </div>
            </div>
            <div class="field">
                <label>Tên banner</label>
                <input type="text" placeholder="Tên">
            </div>
            <div class="field">
                <label> </label>
                <button class="ui button green medium">
                    <i class="icon search "></i> TÌM KIẾM
                </button>
            </div>
        </div>
    </div>
</div>
    

Sử dụng cho modal

Xem code

<div class="ui modal" id="modal1">
    <i class="close icon"></i>
    <div class="header">
        Tạo mới banner
    </div>
    <div class="content">
        <div class="ui  form small">
            <h4 class="ui  header">Hệ thống và chương trình sử dụng</h4>
            <div class="fields">
                <div class="four wide field">
                    <select class="ui dropdown">
                        <option value="">Chọn hệ thống</option>
                        <option value="1">Administrator</option>
                        <option value="2">WEBVTA</option>
                        <option value="3">VNPOST</option>
                        <option value="4">Mobile app</option>
                    </select>
                </div>
                <div class="four wide field">
                    <select class="ui search dropdown">
                        <option value="">Chọn chương trình</option>
                        <option value="1">Administrator</option>
                        <option value="2">WEBVTA</option>
                        <option value="3">VNPOST</option>
                        <option value="4">Mobile app</option>
                    </select>
                </div>
            </div>
            <h4 class="ui  header">Thời gian sử dụng cho banner</h4>
            <div class="fields">
                <div class="four wide field">
                    <div class="ui left icon input">
                        <input type="text" class="datepicker" placeholder="Ngày bắt đầu">
                        <i class="calendar icon"></i>
                    </div>
                </div>
                <div class="four wide field">
                    <div class="ui left icon input">
                        <input type="text" class="datepicker" placeholder="Ngày kết thúc">
                        <i class="calendar icon"></i>
                    </div>
                </div>
            </div>
            <h4 class="ui  header">Thuộc tính hình ảnh</h4>
            <div class="fields">
                <div class="four wide field">
                    <input type="text" placeholder="Title hay ALT cho banner">
                </div>
                <div class="four wide field">
                    <input type="text" placeholder="URL hình ảnh">
                </div>
                <div class="four wide field">
                </div>
            </div>
            <h4 class="ui  header">Kích thước & vị trí banner</h4>
            <div class="fields">
                <div class="four wide field">
                    <select class="ui search dropdown">
                        <option value="">Kích thước banner</option>
                        <option value="1">Administrator</option>
                        <option value="2">WEBVTA</option>
                        <option value="3">VNPOST</option>
                        <option value="4">Mobile app</option>
                    </select>
                </div>
                <div class="four wide field">
                    <select class="ui search dropdown">
                        <option value="">Vị trí banner</option>
                        <option value="1">Administrator</option>
                        <option value="2">WEBVTA</option>
                        <option value="3">VNPOST</option>
                        <option value="4">Mobile app</option>
                    </select>
                </div>
                <div class="four wide field">
                    <select class="ui search dropdown">
                        <option value="">Vị trí trên trang</option>
                        <option value="1">Administrator</option>
                        <option value="2">WEBVTA</option>
                        <option value="3">VNPOST</option>
                        <option value="4">Mobile app</option>
                    </select>
                </div>
            </div>
            <h4 class="ui  header">Link hình ảnh</h4>
            <div class="fields">
                <div class="eight wide field">
                    <img class="ui small  image" src="http://placehold.it/350x150"> <br>
                    <input type="url" placeholder="Link hình ảnh ">
                </div>
                <div class="eight wide field">
                    <img class="ui small  image" src="http://placehold.it/350x150"> <br>
                    <input type="url" placeholder="Link hình ảnh mobile ">
                </div>
            </div>
            <h4 class="ui  header">Bài viết sản phẩm</h4>
            <textarea class="editor-tinymce">Easy! You should check out MoxieManager!</textarea>
        </div>
    </div>
    <div class="actions">
        <div class="ui deny button">
            Hủy
        </div>
        <div class="ui positive right labeled icon button">
            Tạo banner
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>
    

Form mẫu cho việc tạo mới thành phần

Hệ thống và chương trình sử dụng

Thời gian sử dụng cho banner

Thuộc tính hình ảnh

Kích thước & vị trí banner

Link hình ảnh



Bài viết sản phẩm