<!DOCTYPE html> <html> <head> <title>Login Page</title> <style> body { font-family: Arial, sans-serif; } .container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; background-color: #f4f4f4; } h2 { text-align: center; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4caf50; color: white; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Login"> </form> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> </head> <body> <style type="text/css"> #text { height: 25px; border-radius: 5px; padding: 4px; border: solid thin #aaa; width: 100%; } #button { padding: 10px; width: 100px; color: white; background-color: lightblue; border: none; } #box { background-color: grey; margin: auto; width: 300px; padding: 20px; } </style> <div id="box"> <form method="post"> <div style="font-size: 20px;margin: 10px;color: white;">Login</div> <input id="text" type="text" name="user_name"><br><br> <input id="text" type="password" name="password"><br><br> <input id="button" type="submit" value="Login"><br><br> <a href="signup.php">click to register</a><br><br> </form> </div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <br><br> <h4>ตัวอย่างฟอร์มชำระเงิน ถ้าเลือกรูปแบบการชำระเงินเป็นโอนเงิน จะแสดงลิสธนาคารให้เลือก</h4> html + javascript : Show input field only if a specific option is selected </div> <div class="col-sm-3"> <form method="get"> <div class="form-group row"> <label for="cashmethod">เลือกวิธีชำระเงิน</label> <select onchange="yesnoCheck(this);" class="form-control" name="cashmethod" required> <option value="">-วิธีชำระเงิน-</option> <option value="เงินสด">เงินสด</option> <option value="โอนเงิน">โอนเงิน</option> </select> </div> <div class="form-group row" id="ifcash" style="display: none;"> <label for="bank">เลือกธนาคารที่โอนเงิน</label> <select name="bank" class="form-control"> <option value="">เลือกธนาคารที่โอนเงิน</option> <option value="1">bank1</option> <option value="2">bank2</option> <option value="3">bank3</option> </select> </div> <div class="form-group row"> <label for="amount">จำนวนเงิน</label> <input type="number" name="amount" required min="0" class="form-control"> </div> <div class="form-group row"> <button type="submit" class="btn btn-primary">SAVE</button> </div> </form> </div> </div> </div> <script type="text/javascript"> function yesnoCheck(that) { if (that.value == "โอนเงิน") { document.getElementById("ifcash").style.display = "block"; } else { document.getElementById("ifcash").style.display = "none"; } } </script> </body> </html> Cr.https://stackoverflow.com/questions/29321494/show-input-field-only-if-a-specific-option-is-selected