I have used both row and col classes of bootstrap and not working properly.
<!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">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row ">
<div style="background: cyan" class="offset-md-2 col-md-8">
<h1 style="color: red">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row" style="background: lightblue; height: 300px; width:500px;">
<div class="col-md-12">
<div class="col-md-4">Select Type:</div>
<div class="col-md-8">
<select name="user_type" ad="user_type">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div class="col-md-5"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
In this first field text select type and select are displaying in two rows. like all fields. I want the text and input field in single row. can anyone help me?
<!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">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row ">
<div style="background: cyan" class="offset-md-2 col-md-8">
<h1 style="color: red">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row" style="background: lightblue; height: 300px; width:500px;">
<div class="col-md-12">
<div style="float:left;" class="col-md-4">Select Type:</div>
<div class="col-md-8">
<select name="user_type" ad="user_type">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select> </div>
</div>
<div class="col-md-12">
<div style="float:left;" class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div style="float:left;" class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div style="float:left;" class="col-md-5"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
Make your life easy and don't put everything in a div.
<!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">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body style="background-color: lightgray">
<div class="container">
<div class="row ">
<div class="offset-md-2 col-md-8">
<h1 style="color: #333">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row">
<div class="col-md-12">
<h5 style="float: left;margin-left: 30px; ">Select Type:</h5>
<select name="user_type" ad="user_type" style="float: left; margin-left: 20px; margin-top:5px; ">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div class="col-md-5 m-2"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5 m-2"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
Related
I can't get this button not to be overlapping?
This is the piece beating me:
<div class="row">
<div class="col-md-3 form-group">
<label for="agencySelect">Choose an Option</label>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
<option value=""></option>
</select>
</div>
<div class="col-md-3 form-group">
<label for="clientSelect">Choose Another option</label>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
<option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
</select>
</div>
<div class="col-md-3 form-group">
<div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary mb-2" onclick="saveData()">Add</button></div>
</div>
</div>
Here is the Fiddle
Appreciate your help!
Can you check this and let me know is it what you want or something else..?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4" style="background-color:lavender;">
<div>
<label for="agencySelect">Choose an Option</label>
</div>
<div>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
<option value="">jkesndfkjnwejkfnd</option>
</select>
</div>
</div>
<div class="col-4" style="background-color:orange;">
<div>
<label for="clientSelect">Choose Another option</label>
</div>
<div>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
<option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
</select>
</div>
</div>
<div class="col-4" style="background-color:lavender;">
<div id="addTaskBtnSpot">
<button id="addTaskBtn" type="submit" class="btn btn-primary my-2" onclick="saveData()">Add
</button>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to put the select option inside the input box (left-side)
<div class="row">
<div class="col one">
<label class="label">Loan amount</label>
<div class="input-group mb-3">
<select class="form-select btn-primary input-group-text" id="basic-addon1" aria-label="Default select example">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
<input class="form-control loan" type="text" style="direction: rtl;" placeholder="0.00" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
<label class="label" for="customRange1">Duration</label>
<div class="range">
<input type="range" class="form-range" id="customRange1" />
</div>
</div>
Here's a screenshot
here is demo code on how to put selection inside input with bootstrap v3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<select class="form-select btn-primary input-group-text btn btn-default
dropdown-toggle" id="basic-addon1" aria-label="Default select example" data-toggle="dropdown" style="padding: 8px;">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
</div><!-- /.row -->
</form>
</div>
</body>
</html>
Hi This Is My fist time o stack overflow but i would just like to find out how do i make my code clear after a user clicks send in my form here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>Order Now</title>
<link rel="stylesheet" type="text/css" href="styleo.css">
</head>
<body>
<div class="container">
<h2>Order Now</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Discord Name And Discrimator</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email Address</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<div class="select">
<select name="format" id="format">
<option selected disabled>Choose Your Package</option>
<option value="basic">Basic Bot</option>
<option value="advanced">Advanced Bot</option>
<option value="premuim">Premuim Bot</option>
<option value="Website">Website</option>
</select>
<span class="line"></span>
</div>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea required="required"></textarea>
<span class="text">Type Your Message Here...</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="submit" value="Send">
</div>
</div>
</div>
</body>
</html>
I dont know what should i use should i create a separate file i am new to coding thou i think maybe i should use and use JavaScript but i dont know is there anyone open to help me.sorry if its kinda a noob question
You'll need some JS for that, and you have to make some modifications to your code.
For submitting data you should use <form></form>html element with ID and then target it with JS to do a reset() on it.
Example
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<title>Order Now</title>
<link rel="stylesheet" type="text/css" href="styleo.css" />
</head>
<body>
<div class="container">
<h2>Order Now</h2>
<div class="row100">
<form id="my-form" autocomplete="off" onsubmit="submit()">
<div>
<label>Discord name and Discrimator : </label> <input type="text" />
</div>
<div><label>Email : </label> <input type="text" /></div>
<div>
<label>Type your text here : </label>
<textarea></textarea>
</div>
<div class="col">
<div class="inputBox">
<div class="select">
<select name="format" id="format">
<option selected disabled>Choose Your Package</option>
<option value="basic">Basic Bot</option>
<option value="advanced">Advanced Bot</option>
<option value="premuim">Premuim Bot</option>
<option value="Website">Website</option>
</select>
<span class="line"></span>
</div>
</div>
</div>
<div class="col">
<input type="submit" value="Send" />
</div>
</form>
</div>
</body>
<script src="clear-form.js"></script>
</html>
clear-form.js :
function submit() {
document.getElementById("my-form").reset();
}
<!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>Document</title>
</head>
<body>
<div class="container">
<h2>Order Now</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Discord Name And Discrimator</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email Address</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<d iv class="col">
<div class="inputBox">
<div class="select">
<select name="format" id="format">
<option selected disabled>Choose Your Package</option>
<option value="basic">Basic Bot</option>
<option value="advanced">Advanced Bot</option>
<option value="premuim">Premuim Bot</option>
<option value="Website">Website</option>
</select>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea required="required"></textarea>
<span class="text">Type Your Message Here...</span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="btnsubmit" style="border: solid 1px; width: 85px; padding: 10px; cursor: pointer ;border-radius: 8px; background-color: greenyellow;">
submit
</div>
</div>
</div>
</body>
<script>
let send = document.querySelector(".btnsubmit")
console.log(send)
send.addEventListener("click", function () {
console.log("okay")
var container = document.querySelector(".container");
let inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if(inputs[index].type =="text")
inputs[index].value = '';
}
})
</script>
</html>
I cant seem to make this work. I wanted a simple responsive login page but the form doesn't stay on the center, it keeps going to the left.
Why this is not working?? If I divide the col into 3 sections of 4, should the it stay on the middle?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="margin-top:150px">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
I've added a class named col-centered. You can see an example below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered">
<div class="jumbotron">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
I'm using bootstrap for the design of my form, but it's not showing the back-ground color of the form, like it's in the examples.
All the fonts colors sizes & designs of the bootstrap are applied, but the background of my form is missing.
I also copy and pasted all the code from the example to see if it will show the form background, but even then it didn't show the background-color of the bootstrap theme.
I have included bootstrap.css and bootstrap.min.css in my html file.
This is the theme that I am using: https://bootswatch.com/flatly/
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Users</title>
</head>
<body>
<form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3">
<button type="reset" class="btn btn-default">Reset </button>
<button type="submit" class="btn btn-primary">Login </button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
try it like this
<head>
<meta charset="utf-8">
<title>Users</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- my style sheet -->
<link rel="stylesheet" href="style.css">
</head>
There is a missing code before the fiedset tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Users</title>
</head>
<body>
<form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
<div class="row">
<div class="col-bs-6">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3">
<button type="reset" class="btn btn-default">Reset </button>
<button type="submit" class="btn btn-primary">Login </button>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</form>
</body>
</html>