Bootstrap4 表单

I moduli HTML sono una parte integrante delle pagine web e delle applicazioni web, ma creare布局 di moduli o impostare lo stile dei controlli di modulo manualmente con CSS può essere noioso. Bootstrap semplifica notevolmente lo stile e l'allineamento dei controlli di modulo (come etichette, campi di input, menù a tendina, aree di testo, pulsanti, ecc.) grazie a un insieme predefinito di classi.

In questa sezione, impareremo come utilizzare Bootstrap per creare moduli. Bootstrap consente di creare moduli di diverse stili utilizzando semplici tag HTML e classi estese.

Elementi di modulo <input>, <textarea> e elementi <select> Quando si utilizza la classe .form-control, la larghezza è impostata al 100%.

Layout dei moduli Bootstrap4

Modulo a pila (ampiezza a schermo intero): direzione verticale
Modulo in linea: direzione orizzontale

Bootstrap offre due tipi di layout per i moduli:

Modulo a pila

Esempio seguente utilizza due caselle di input, una casella di controllo e un pulsante di invio per creare un modulo a pila:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Modulo a pila</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">Email:</label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="Inserisci email">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Password:</label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="输入密码">
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input class="form-check-input" type="checkbox"> 记住我
　　　　　　</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">提交</button>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

Modulo in linea

Tutti gli elementi del modulo in linea sono allineati a sinistra.

Attenzione: quando la larghezza dello schermo è inferiore a 576px, i campi vengono visualizzati in modo verticale. Solo quando la larghezza dello schermo è maggiore o uguale a 576px, i campi vengono visualizzati in linea.

Il modulo in linea deve avere la classe .form-inline aggiunta all'elemento <form>.

Il seguente esempio utilizza due caselle di input, una casella di controllo e un pulsante di invio per creare un modulo in linea: