Failed to Produce Result in Html5 and CSS? - javascript

Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:
<div id="wrapper" class="wrapperClass">
<fieldset>
<legend class="regLagendClass">Registration Form</legend>
<form id="registrationForm" method="Post" action="https://www.google.com.pk/">
<div class="divClass">
<label for="firstName" class="labelClass">First Name:</label>
<input type="text" name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
</div>
<div class="divClass">
<label for="lastName" class="labelClass">Last Name:</label>
<input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
</div>
<div class="divClass">
<label for="userName" class="labelClass">User Name:</label><br>
<input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
</div>
<div class="divClass">
<label for="password" class="labelClass">Password:</label><br>
<input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
</div>
<div class="divClass">
<label for="cPassword" class="labelClass">Confirm Password:</label><br>
<input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
</div>
<div class="divClass">
<label for="gender" class="labelClass">Choose Gender:</label>
<select name="gender" class="textboxClass">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="divClass">
<label class="labelClass" for="dob">Date of Birth:</label><br>
<input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
</div>
<div class="divClass">
<label for="country" class="labelClass">Country:</label><br>
<input type="text" id="country" class="textboxClass"/><br>
</div>
<div class="divClass">
<input type="submit" value="Sign Up">
</div>
</form>
</fieldset>
</div>
CSS:
.wrapperClass
{
width:650px;
height: 700px;
margin-left: 300px;
margin-right: 300px;
}
.divClass
{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
.labelClass
{
width: 75px;
display: inline;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline;
}
My code should work as this image :

Check this out http://jsfiddle.net/kabeer182010/gd4Xe/.
If you just replace 'display: inline' with 'display: inline-block' and remove all <br> tags this works fine.

display: inline
causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).
So basically change your last 2 CSS classes to:
.labelClass
{
width: 75px;
display: inline-block;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline-block;
}

Give .textboxClass a float right
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;
}
Should do the trick

Related

Text input field "PLACEHOLDER" not appearing

I'm a newbie, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input.
I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app
can you share some more info, looks like the above is simple HTML, The placeholder will disappear when you edit the input.
Not sure why it wouldn't, perhaps share your code online.
Like this,
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
where we can inspect and debug it.
As of now, your question is too generic to find the issue. And by looks of class names, you are using some sort of library to style your page. share that info too
you have to replace form-floating by form-group
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img class="mb-4" src="../images/example.png" alt="" width="72" height="57" />
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>

Input field "placeholder" not working/showing

I'm a newbie front-end dev, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input. I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app
As Phil said in the comment to your post the issue is that you're using Bootstrap Floating Labels (by wrapping your inputs with a .form-floating) but you're not supplying labels (yours are commented out).
<div class="form-floating">
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Alternatively you can remove the .form-floating surrounding div and use the placeholders as normal
<div>
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Here they are uncommented and working correctly: on codepen
Remove class form-floating from div tag it will work.

Trying to get my radio buttons to line up

Alright so I'm doing a freecodecamp project of a survey. The codepen that
they want your survey to function like is this
https://codepen.io/freeCodeCamp/pen/VPaoNP. I currently have mine looking
like https://codepen.io/anon/pen/qvQLZx.
my css
#title {
text-align:center;
}
#description {
text-align:center
}
#survey-form {
text-align:center;
}
.leftsidequestions {
display:inline-block
margin:auto;
text-align:right;
}
#number {
width:9%;
}
My problem right now is that I want
my radio buttons lined up like they do in their codepen. Also it wouldnt be
bad if I could figure out how to line up my other questions like theirs. They
have the text to the left and then the buttons/boxes to the right with a
divide in the middle but I can't figure out how to do this.
So far I've tried vertically aligning them and and display blocking and
inlineblocking them.
Do like this yourinputs will be in one column check below example.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="main">
<h1 id="title">Survey Form</h1>
<p id="description">Favourite Wu-Tang Things</p>
<div class="leftsidequestions">
<form id="survey-form">
<label id="name-label" for="name">Name:</label>
<input type="name" id="name" required placeholder="Name"><br>
<br>
<label id="email-label" for="email">Email:</label>
<input type="email" id="email" required placeholder="Email"><br>
<br>
<label id="number-label" for="age">  Age: </label>
<input type="number" id="number" min="1" max="100" placeholder="Age"><br><br>
Favourite Wu-Tang Album:
<select id="dropdown">
<option value="1">Enter the Wu-Tang (36 Chambers)</option>
<option value="2">Wu-Tang Forever</option>
<option value="3">The W</option>
<option value="4">Iron Flag</option>
<option value="5">8 Diagrams</option>
<option value="6">A Better Tomorrow</option>
<option value="7">Once Upon a Time in Shaolin</option>
</select><br><br>
Favourite Member<br>
<div class="inputs"><input type="radio" name="member" value"rza">Rza
<br><input type="radio" name="member" value"gza">Gza
<br><input type="radio" name="member" value"odb">Ol Dirty Bastard
<br><input type="radio" name="member" value"Methodman">Method-Man<br>
<input type="radio" name="member" value"Raekwon">Raekwon
<br><input type="radio" name="member" value"U-God">U-God
<br><input type="radio" name="member" value"Masta">Masta Killa
<br><input type="radio" name="member" value"Ghostface">Ghostface Killah
</div>
</div>
</form>
</div>
first add one div with class name "inputs" and wrap your inputs inside this. and add this css class
body
#title {
text-align:center;
}
#description {
text-align:center
}
#survey-form {
text-align:center;
}
.leftsidequestions {
display:inline-block
margin:auto;
text-align:right;
}
#number {
width:9%;
}
.inputs {
display: flex;
flex-direction: column;
width: 200px;
margin: auto;
}
and see it then in your code.
Following their example, for every line they wrapped content on the left and right each in div elements that they set to inline-block. Like this:
.left,
.right {
display: inline-block;
width: 45%;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
input {
margin: 5px;
}
<div class="left">
<label id="name-label" for="name">Name:</label>
</div>
<div class="right">
<input type="name" id="name" required placeholder="Name" />
</div>
<div class="left">
<label id="email-label" for="email">Email:</label>
</div>
<div class="right">
<input type="email" id="email" required placeholder="Email" />
</div>

Hiding billing section when "same as shipping address" checkbox is clicked?

How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>
1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'

displaying divs inside form fields in same line

can you tell me how to how to make divs inside form to align
providing code below
display: table-cell not working
http://codepen.io/anon/pen/EKwOKa
<div class="form-fields">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" /><br>
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" /><br>
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea><br>
</div>
<div class="upload-image">
<div class="upload-image-preview"></div>
<input type="file" name="file" value="Upload Image" />
</div>
vertical-align: top; will help top alignment.
.form-fields {
display: table-cell;
vertical-align: top;
}

Categories

Resources