The code below creates the title of the event and three lables, it works fine but I couldn't find out how to create a black rectangle to put the title inside it as in the attached image. Do I have to create a canvas and put the labels inside it?
Besides I could not find out how to center the title and three labels with a margin to show it more centered
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event registration form</title>
<style>
label
{
display : block;
margin : 0 0 1rem;
}
</style>
</head>
<body>
<h1>Event registration form</h1>
<label>
Number 1
<input type="number" id="age" min="0"/>
</label>
<label>
Number 2
<input type="number" id="tso" min="0"/>
</label>
<label>
Number 3
<input type="number" id="fim" min="0"/>
</label>
</body>
</html>
You can do it via css.
Black rectangle with white font:
Add a class bg-dark to your h1 and set the background color to dark and the font color to white:
.bg-dark{
background-color: #000;
color:white;
text-align:center;
}
Tag alignment:
Add a wrapper for the label and the input and use flexbox ( check the browser compatibility just in case).
Check the snippet.
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
/*Just changed the font, so it looks nice, you can use your own font*/
font-family: 'Roboto', sans-serif;
}
.bg-dark{
background-color: #000;
color:white;
text-align:center;
}
.form-style{
margin-left: 2rem;
}
.input-style{
display:flex;
flex-direction:row;
align-items:center;
justify-content:start;
padding-top: 0.7rem;
padding-bottom:0.7rem;
}
.input-style label{
margin-left: 1rem;
margin-right: 1rem;
text-align: start;
font-weight: bold;
}
.input-style .input-wrapper{
display:flex;
flex-direction:column;
}
.input-style .input-wrapper input{
border: 2px solid #f4f4f4;
border-radius: 12px;
background-color: #d4d4d4;
color: #333;
padding: 7px 13px;
padding-left: 13px;
}
<h1 class="bg-dark">Event registration form</h1>
<form class="form-style">
<div class="input-style">
<label for="age"> Number 1</label>
<div class="input-wrapper">
<input type="number" id="age" placeholder="age here" min="0"/>
<small>Age</small>
</div>
</div>
<div class="input-style">
<label for="tso">Number 2</label>
<div class="input-wrapper">
<input type="number" placeholder="tso here" id="tso" min="0"/>
<small>Tso</small>
</div>
</div>
<div class="input-style">
<label>Number 3</label>
<div class="input-wrapper">
<input type="number" placeholder="fim here" id="fim" min="0"/>
<small>Fim</small>
</div>
</div>
</form>
Related
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I know this type of question has been asked before, but I couldn't get the answer. I have a contact form, and I want to implement the new Invisible Google Recaptcha. However, I have used an <input> rather than a <button> and I can't figure out how to do this. Here is my code for the contact form I have:
input, textarea {
padding: 5px;
margin: 10px;
font-family: Cambria, Cochin, serif;
font-size: medium;
font-weight: bold;
outline: none;
}
input[type=text], textarea {
width: 350px;
background-color: #b6b6b4;
border: 1px solid #989898;
border-radius: 10px;
}
input[type=submit] {
width: 100px;
background-color: #989898;
border: 1px solid #707070;
font-size: large;
color: #000;
border-radius: 5px;
}
input[type=submit]:hover {
background-color: #848484;
cursor: pointer;
}
input[type=submit]:active {
background-color: #989898;
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<!--CONTACT FORM-->
<form name="contactform" method="post" action="send_form_email.php">
<div>
<input name="name" type="text" placeholder="Name..." required> <br> </div>
<div>
<input name="email" type="text" placeholder="Email..." required>
<br>
</div>
<input type="checkbox" name="maillist" value="1" checked> Subscribe to mailing list<br>
<div>
<input name="game" type="text" placeholder="Game suggestions...">
<br>
</div>
<div>
<textarea cols="30" name="comment" rows="9" placeholder="Comments..."></textarea>
<br> </div>
<div>
<input name="submit" type="submit" value="Submit"> </div>
</form>
Then I have the google ReCaptcha button:
<button
class="g-recaptcha"
data-sitekey="############################"
data-callback="YourOnSubmitFn">
Submit
</button>
Any Help would be appreciated. Also, I was wondering if you could remove the ReCaptcha logo on the bottom right.
try this, It will hide the Google reCaptcha Invisible Badge over the page.
.grecaptcha-badge {
display: none !important;
}
Keep in mind the badge should be displayed as Google pretends the "privacy" and "terms" links to be present.
From the reCaptcha docs check this g-recaptcha tag attributes and grecaptcha.render parameters section:
g-recaptcha tag attribute: data-badge
grecaptcha.render parameter: badge
Value: bottomright
bottomleft
inline
Default: bottomright
Description: Optional. Reposition the reCAPTCHA badge. 'inline' allows you to control the CSS.
This is a basic example
<html>
<head>
<title>reCaptcha example</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<style>
.grecaptcha-badge {
display: none;
}
</style>
</head>
<body>
<form id="demo-form" action="/post" method="post">
<button data-sitekey="your_site_key" data-callback='onSubmit' data-badge="inline">Login</button>
</form>
</body>
</html>
Set the data-badge attribute to inline, notice the data-badge="inline":
<button type="submit" data-sitekey="your_site_key" data-callback='onSubmit' data-badge="inline">Login</button>
And on the html code:
<style>
.grecaptcha-badge {
display: none;
}
</style>
You could also just add to your CSS:
.grecaptcha-badge {
display: none;
}
I'm doing a project but I need help with my form. I am making a brief description text box and the size I have is how big I want it but my text starts in the middle. Also, when you type the text goes beyond the box. I don't want the text to stay on one line I want it contained in the box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Centennial College|Creating Student Profile</title>
<meta charset="utf-8">
<style id="navStyle">
/*I got some help on this coding from w3schools.*/
#image2{
position: absolute; height: 100px;
}
#navigationList{
list-style-type: none;
margin: 0;
padding:0;
overflow:hidden;
background-image: url(Images/background_header.jpg);
position: absolute; left: 310px; height: 100px; width:950px;
font-weight: bold;
}
.links{
float:left;
position: relative; top: 30px;
}
.links a{
display:block;
color:white;
text-align: center;
padding: 10px 50px;
text-decoration: none;
}
/*When someone hovers over the link the colour goes black*/
.links a:hover{
background-color:#c6f22c;
color: #45473e;
}
.links .active{
color:#6b8112;
}
</style>
<style id="bodyStyle">
#headerImage img{
width: 1245px;
}
body{
background-color:#464646;
font-family:cursive, sans-serif;
color:#464646;
}
forms{
color: #464646;
font-size: 20px;
background-color:floralwhite;
display: inline-block;
}
#formSection h1, h3{
color:aliceblue;
}
#description{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<div class="Navigation">
<!--Navigation Links with Logo. All Style code is in style sheets.-->
<img id="image2" src="Images/Logo.jpg" alt="Centennial Logo" />
<ul id="navigationList">
<li class="links">Home Page</li>
<li class="links"><a class="active" href="creatstudentprofile.html">Create Student Profile</a></li>
<li class="links">View My Performance</li>
</ul>
</div>
<div id="headerImage">
<img src="Images/ecentennial-students.jpg" alt="Header Picture"/>
</div>
<div id="formSection" style="margin:0 auto; width:75%; text-align: center;">
<h1>Enter the information below to create your student profile!</h1>
<h3>Create your Student Profile:</h3>
<forms>
<fieldset>
<legend>Student Profile</legend>
Name:
<br>
<input type="text" name="name" size="40">
<br>
Email Address:
<br>
<input type="email" name="email" size="40">
<br>
Year:
<br>
<select id="year" name="Year">
<option value="year1">Year 1</option>
<option value="year2">Year 2</option>
<option value="year3">Year 3</option>
</select>
<br>
<input type="radio" name="computerType" value="mac">Mac
<input type="radio" name="computerType" value="pc">PC
<br>
Brief Description:
<br>
<input type="text" name="Description" size="40" id="description">
<br>
<input type="Submit" value="Submit">
</fieldset>
</forms>
</div>
</body>
</html>
Souns to me that you want your input to behave exactly as a textarea. You should just use it instead.
<textarea id="description" name="Description"></textarea>
I have the following code for range input along with some style applied:
<style media="screen">
.contactinfo label{display: inline-block;
width: 170px;
text-align: right;
vertical-align:top;
}
.contactinfo div ~ div {
margin-top: 2px;
}
.contactinfo {background:lightyellow; border:10px solid yellow; margin-bottom:10px; width: 720px;}
.contactinfo textarea {width: 180px; box-sizing: border-box;}
</style>
<fieldset class="contactinfo">
<legend>Your indicators</legend> <br>
<div class="">
<label for="ht">Height:</label>
Short <input type="range" name="ht" id="ht" value="" min="0" max="100"> Tall
</div>
<div class="">
<label for="sal">Salary:</label>
Poor <input type="range" name="ht" id="ht" value="" min="0" max="100"> Rich
</div>
</fieldset>
But the text on either side of range input are not aligned properly. Here is what it looks like now:
Even after I remove vertical-align:top it does not align properly.
This is how it looks like now:
What I want is(ignoring the highlight):
Remove vertical-align:top;
see https://jsfiddle.net/aqfcde2d/
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.