Bootstrap4-forms
提供：Dev Guides
ブートストラップ4-フォーム
説明
フォーム要素は、チェックボックス、ラジオボタン、テキストフィールドなどのフィールドを使用してユーザーから入力を収集するために使用されます。
基本形
クラス_.form-group_を使用して<div>要素のラベルとコントロールをラップし、_。form-control_のクラスをすべてのテキスト<input>、<textarea>、および<select>要素に追加できます。
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Form</h2>
<form>
<div class = "form-group">
<label for = "exampleInputEmail1">Email</label>
<input type = "email" class = "form-control"
id = "exampleInputEmail1" aria-describedby = "emailHelp"
placeholder = "Enter your email">
</div>
<div class = "form-group">
<label for = "exampleInputPassword1">Password</label>
<input type = "password" class = "form-control"
id = "exampleInputPassword1" placeholder = "Enter your password">
</div>
<div class = "form-group form-check">
<label class = "form-check-label" for = "exampleCheck1">
<input type = "checkbox" class = "form-check-input"
id = "exampleCheck1">Remember me
</label>
</div>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
フォームコントロール
ブートストラップは、input _、 textarea 、 select_などの最も一般的なフォームコントロールをネイティブにサポートします。
次の例は、。form-control classで指定された上記のサポートされているフォームコントロールを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h4>Example Input</h4>
<div class = "form-group">
<input type = "email" class = "form-control"
id = "exampleFormControlInput1" placeholder = "Enter your email">
</div>
<h4>Example Select</h4>
<div class = "form-group">
<select class = "form-control" id = "exampleFormControlSelect1">
<option>Select Option #1</option>
<option>Select Option #2</option>
<option>Select Option #3</option>
<option>Select Option #4</option>
<option>Select Option #5</option>
</select>
</div>
<h4>Example Multiple Select</h4>
<div class = "form-group">
<select multiple class = "form-control" id = "exampleFormControlSelect2">
<option>Multiple Select #1</option>
<option>Multiple Select #2</option>
<option>Multiple Select #3</option>
<option>Multiple Select #4</option>
<option>Multiple Select #5</option>
</select>
</div>
<h4>Example Textarea</h4>
<div class = "form-group">
<textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
サイズ変更、読み取り専用、範囲入力
入力フィールドは、それぞれ_.form-control-lg_および_.form-control-sm_クラスを使用して、大きいサイズと小さいサイズで表示できます。 _readonly_属性はブール属性で、入力フィールドを読み取り専用にし、変更できません。 _.form-control-range_クラスを使用して、入力の範囲を設定できます。
次の例は、上記のタイプを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Sizing</h2>
<input class = "form-control form-control-lg" type = "text"
placeholder = "Large Input">
<br>
<input class = "form-control" type = "text"
placeholder = "Default Input">
<br>
<input class = "form-control form-control-sm" type = "text"
placeholder = "Small Input">
<br>
<br>
<h2>Readonly</h2>
<input class = "form-control" type = "text"
placeholder = "This is readonly text" readonly>
<br>
<br>
<h2>Range Inputs</h2>
<div class = "form-group">
<input type = "range" class = "form-control-range"
id = "formControlRange">
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
フォーム行を使用したフォームグリッド
列のコンパクトレイアウトを指定する_.form-row_クラスを使用して、複数の列を必要とする複雑なフォームを作成できます。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Form Row</h2>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputEmail4">First Name</label>
<input type = "text" class =" form-control"
id = "inputEmail4" placeholder = "First Name">
</div>
<div class = "form-group col-md-6">
<label for = "inputPassword4">Last Name</label>
<input type = "text" class = "form-control"
id = "inputPassword4" placeholder = "Last Name">
</div>
</div>
<div class = "form-group">
<label for = "inputAddress">Address</label>
<input type = "text" class = "form-control" id = "inputAddress"
placeholder = "Address">
</div>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputCity">City</label>
<input type = "text" class = "form-control" placeholder = "City"
id = "inputCity">
</div>
<div class = "form-group col-md-4">
<label for = "inputState">State</label>
<select id = "inputState" class = "form-control">
<option selected disabled>Select State</option>
<option>State 1</option>
<option>State 1</option>
</select>
</div>
<div class = "form-group col-md-2">
<label for = "inputZip">Pin Code</label>
<input type = "text" class = "form-control" id = "inputZip"
placeholder = "Pin Code">
</div>
</div>
<div class = "form-group">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck" >
<label class = "form-check-label" for = "gridCheck">
I Agree To Terms and Conditions
</label>
</div>
</div>
<button type = "submit" class = "btn btn-primary">Submit</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
横型
.row_クラスをフォームグループに追加して、水平フォームを作成します。 ラベルとコントロールの幅は、。col-- クラスを使用して指定し、。col-form-label_クラスを<label>に追加して、フォームコントロールを垂直方向の中央に配置できるようにします。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Horizontal Forms</h2>
<div class = "form-group row">
<label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputEmail3"
placeholder = "First Name">
</div>
</div>
<div class = "form-group row">
<label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputPassword3"
placeholder = "Last Name">
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios1" value = "option1" checked>
<label class = "form-check-label" for = "gridRadios1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios2" value = "option2">
<label class = "form-check-label" for = "gridRadios2">
Option 2
</label>
</div>
<div class = "form-check disabled">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
<label class = "form-check-label" for = "gridRadios3">
Option 3 (disabled)
</label>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2">Checkbox</div>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "gridCheck1">
<label class = "form-check-label" for = "gridCheck1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck2">
<label class = "form-check-label" for = "gridCheck1">
Option 2
</label>
</div>
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
インラインフォーム
クラス_.form-inline_を<form>タグに追加することにより、すべての要素がインライン、左揃え、ラベルが並んでいるフォームを作成できます。
次の例は、単一の水平行にフォームコントロールを表示する方法を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Inline Forms</h2>
<form class = "form-inline" action = "/action_page.php">
<label for = "email">Email :
<input type = "email" class = "form-control" id = "email"
placeholder = "Enter email" name =" email"></label>
<label for = "pwd">Password :
<input type = "password" class = "form-control" id = "pwd"
placeholder = "Enter password" name = "pswd"></label>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
無効なフォームとヘルプテキスト
_disabled_属性を使用して、フォームコントロールを無効にします（入力に対するユーザーインタラクションをブロックします）。 _.form-text_クラスを使用して、関連フィールドにテキストを入力できます。 次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Disabled Form</h2>
<form>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput">Name</label>
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
</div>
<div class = "form-group">
<label for = "disabledSelect">Select your option</label>
<select id = "disabledSelect" class = "form-control">
<option>Select</option>
</select>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "disabledFieldsetCheck" disabled>
<label class = "form-check-label" for="disabledFieldsetCheck">
Remember Me
</label>
</div>
<button type = "submit" class = " btn btn-primary">Submit</button>
<br>
<br>
<h2>Help Text</h2>
<label for = "inputPassword5">Password</label>
<input type = "password" id = "inputPassword5" class = "form-control"
aria-describedby = "passwordHelpBlock">
<small id = "passwordHelpBlock" class = "form-text text-muted">
Your password must be 6-10 characters long (This is help text).
</small>
</fieldset>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
