Формы Bootstrap-5

Опубликовано: 30 Ноября, 2021

Элементы управления формой: <input>, <select>, <textarea> - это теги, используемые для общего вида, такие как поле ввода, элемент выбора и текстовые поля.

Примечание: чтобы сделать Пользователь интерфейс более презентабельный, используйте такие свойства, как отступы, поля по мере необходимости.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    <!-- CSS only -->
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " >
 </ head >
 
< body class = "container-sm mt-5" >
    < form >
        < h2 class = "text-center" >
            Display Form Controls
        </ h2 >
         
        < div class = "form-group" >
            < label >Email address</ label >
            < input type = "email" class = "form-control"
                placeholder = "geeks@example.com" >
        </ div >
        < div class = "form-group mt-2" >
            < label >Example select</ label >
            < select class = "form-control" >
                < option >1</ option >
                < option >2</ option >
                < option >3</ option >
                < option >4</ option >
                < option >5</ option >
            </ select >
        </ div >
        < div class = "form-group mt-2" >
            < label >Example textarea</ label >
            < textarea class = "form-control" ></ textarea >
        </ div >
    </ form >
 </ body >
 
</ html > 

Выход:

Заметки:

Для управления формой используется класс .form-control.
Размер элемента управления формой можно настроить с помощью .form-control-lg и .form-control-sm.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    <!-- CSS only -->
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " >
 </ head >
 
< body class = "container-sm mt-5" >
    < input class = "form-control mt-3 form-control-lg"
        type = "text" placeholder = ".form-control-lg" >
 
    < input class = "form-control mt-3" type = "text"
        placeholder = "Default input" >
 
    < input class = "form-control mt-3 form-control-sm"
        type = "text" placeholder = ".form-control-sm" >
 </ body >
 
</ html > 

Выход:

Тип ввода файла может быть определен с помощью класса .form-control-файл

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
 
    <!-- CSS only -->
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " >
 </ head >
 
< body class = "container-sm mt-5" >
    < form >
        < div class = "form-group" >
            < label >Example file input</ label >< br >
            < input type = "file" class = "form-control-file" >
        </ div >
    </ form >
 </ body >
 
</ html > 

Выход:

Тип ввода диапазона можно определить с помощью класса .form-control-range.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Input Range</ title >
 
    <!-- CSS only -->
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " >
 </ head >
 
< body class = "container-sm mt-5" >
    < form >
        < div class = "form-group" >
            < label >Example Range input</ label >< br >
             
            < input type = "range"
                class = "form-control-range" >
        </ div >
    </ form >
 </ body >
 
</ html > 

Выход:

2. Радио и флажки: для радио и флажков используются классы .form-check.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Radios and CheckBoxes</ title >
 
    <!-- CSS only -->
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " >
 </ head >
 
< body class = "container-sm mt-5" >
    < form >
        < div class = "form-check" >
            < input class = "form-check-input"
                type = "checkbox" >
 
            < label class = "form-check-label" >
                Default checkbox
            </ label >
        </ div >
         
        < div class = "form-check" >
            < input class = "form-check-input"
                type = "radio" >
 
            < label class = "form-check-label" >
                Default Unchecked Radio
            </ label >
        </ div >
    </ form >
 </ body >
 
</ html > 

Выход:

3. Горизонтальная форма: для горизонтальной формы используется класс .form-row.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Horizontal Form</ title >
 
    <!-- CSS only -->
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css " >
 </ head >
 
< body class = "container-sm mt-5" >
    < form >
        < div class = "form-row p-4" >
            < div class = "col mt-2" >
                < input type = "text"
                    class = "form-control"
                    placeholder = " User Name" >
            </ div >
 
            < div class = "col mt-2" >
                < input type = "password"
                    class = "form-control"
                    placeholder = " Password" >
            </ div >
 
            < div class = "col-2 mt-2 " >
                < button class="btn btn-primary
                    btn-block">Login</ button >
            </ div >
        </ div >
    </ form >
 </ body >
 
</ html > 

Выход:

Technical Scripter HTML HTML-Misc Bootstrap

Формы Bootstrap-5

HTML

HTML

HTML

HTML

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ