I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 months ago.
I have this code:
#login-form {
display: flex;
justify-content: center;
align-items: center;
}
<!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">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
And my div is only centered horizontaly, but not verticaly, why is my div not centered verticaly too?
flexbox doesn't have any height which means that it cannot center the form vertically. To center the form, you need to give the html, body and the #login-form a height 100% as shown in the snippet below.
html,
body {
height: 100%;
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<!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>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br />
<input
type="text"
id="login-field"
name="login"
placeholder="Digite seu login aqui"
/>
<br />
<label for="senha">Senha</label>
<br />
<input
type="password"
id="senha-field"
name="senha"
placeholder="Digite sua senha aqui"
/>
<br />
<button type="submit" id="botao-entrar" onclick="entrar()">
Entrar
</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
I hope this helps
It's actually centered vertically inside the login-form. The thing is that the login-form's height is equal to its content. You could overwrite that height through CSS, like this:
body{
margin:0;
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh; /* line I added */
}
<!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">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
I am looking at making a simple survey for my clients, I have the base code, I just need to be able to log the users input to a txt file!
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form validation example</title>
<style>
input{display:block; margin-bottom:10px;}
</style>
</head>
<body>
<h1>######</h1>
<h2>#####</h2>
<form action="validation_example.html" method="post">
<label for="first_name">#####</label>
<input id="first_name" type="text" />
<label for="last_name">###</label>
<input id="last_name" type="text" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The data sent is not being submitted using through url. When I click submit, the url does not have the key value pairs.Note: I have not named anything in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Assignment1.19</title>
</head>
<body>
<h1>Register</h1>
<form class="" action="#" method="GET">
<div class="">
<label for="hi" >First Name:</label>
<input id="hi" type="text" name="" value="" placeholder="Jane" name= "hello" required autofocus>
<label for="no">Last Name:</label>
<input id="no" type="text" name="" value="" placeholder="Doe"name= "naw" required>
<br>
</div>
<div class="">
<button type="submit" name="button">Submit</button>
</div>
</form>
</body>
</html>
You have two name attributes and no value values.
You also should have whitespace separating each attribute.
Also, your action should point to a URL that handles the request.
I have no CSS files, only an index.html. I am following a youtube tutorial and I've confirmed multiple times that I am writing the code correctly. The video is a year old, so maybe, I'm doing something wrong syntactically. But otherwise, I cannot seem to find out why the radio buttons won't show up. I tried style="opacity: 100;" and that did nothing either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<title>PusherPoll</title>
</head>
<body>
<div class="container">
<h1>OS Vote</h1>
<p>Vote for your favorite OS to develop on.</p>
<form id="vote-form">
<p>
<input type="radio" name="os" id="windows" value="Windows" />
<label for="windows">Windows</label>
</p>
<p>
<input type="radio" name="os" id="macos" value="MacOS" />
<label for="macos">MacOS</label>
</p>
<p>
<input type="radio" name="os" id="linux" value="Linux" />
<label for="linux">Linux Distro</label>
</p>
<p>
<input type="radio" name="os" id="other" value="Other" />
<label for="other">Something Else</label>
</p>
<input type="submit" value="Vote" class="btn" />
<br></br>
<div id="chartContainer" style="height: 300px; width:100%;"></div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/5.0.2/pusher.min.js" integrity="PRIVATE-NOSHARE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha256-CIc5A981wu9+q+hmFYYySmOvsA3IsoX+apaYlL0j6fg=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
As per the Materilize documentation, you should do it a bit different. Instead of this:
<p>
<input type="radio" name="os" id="windows" value="Windows" />
<label for="windows">Windows</label>
</p>
try this:
<p>
<label>
<input name="group1" type="radio" checked />
<span>Red</span>
</label>
</p>
Here is the documentation: Radio buttons
Hope it helps!
your prbolem is in link rel
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.