i have a form on a div with check boxes, the check boxes are to low in relationship to the line of the text,
what is missing to make it align vertically?,, thanks!
<div id="dialog-form2" title="Titulo">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Your name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Your email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="email">Your phone number</label>
<input type="text" name="phone" id="phone" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Your Member Number</label>
<input type="password" name="password" id="password" value="" class="text ui-widget- content ui-corner-all" />
<br>
Enquiry<br>
<input type="checkbox" name="option1" value="Milk"> I would like to r <br>
<input type="checkbox" name="option2" value="Butter">I need a h <br>
<input type="checkbox" name="option2" value="Butter">Please email me with offer details<br>
<input type="checkbox" name="option2" value="Butter">Please call me to discuss offer<br>
<input type="checkbox" name="option2" value="Butter">Other?<br>
</fieldset>
</form>
</div>
it's hard to answer this without knowing what your style sheet is looking like. Even your font / font size will affect this to some degree. For instance, just pasting your code into a blank html file and bringing it up in a browser alignment is slightly off because it's using Times for the font for me, but then if i change the body font to arial it lines up great. Just having only this snipped with no associated css makes it hard to answer the question as clearly as you might need.
Related
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
I'm learning HTML and I had some problems today with the page on the picture, I wanted to have the e-mail input under the First Name (just like the picture) input but when I first tried, it just went to the right of the page, right after Last Name, so I had to close the <form> and open it again so it would move a block below. Is there another way to do that?
The most simple answer is to use a <br /> element:
<h1>Course Signup Page</h1>
<form id="loginform">
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
<br /> <!-- you can simply insert a line-break here -->
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</form>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Another option is to wrap your rows in any appropriate block level element (not a form element though, as that will interfere with the submitting, and also form elements cannot be nested).
Block level elements have some standard rendering behaviour:
They take as much horizontal space as they can get.
They cause a line-break before and after themselves. <- The relevant part for you.
They can be assigned width and height via CSS.
The standard element for this is div:
<h1>Course Signup Page</h1>
<form id="loginform">
<div>
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
</div>
<div>
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</div>
</form>
This does not fix the alignment problem, though.
I'd rather suggest you make use of the power of CSS and use a CSS grid:
#loginform {
display: grid;
grid-template-columns: repeat(4, minmax(0, min-content));
grid-column-gap: 20px;
grid-row-gap: 5px;
}
#loginform label {
white-space: nowrap;
}
<h1>Course Signup Page</h1>
<form id="loginform">
<label for="firstname">First name</label> <input type="text" id="firstname" />
<label for="lastname">Last name</label> <input type="text" id="lastname" />
<label for="email">E-Mail</label> <input type="email" id="email" />
<label for="password">Password</label> <input type="password" id="password" />
</form>
It has to be said though, that this requires additional effort to make it work in IE 10 / 11.
What tag should i use for small amount of text. For example it is good practise to use p tag for every "small" text like here "username" and pasword" or for day/month/year, should i use also p tag?
<div class="login-area">
<p>Username:</p>
<input type="text">
<p>Password:</p>
<input type="password">
</div>
Use
<label for="name">Your Form label</label>
<input type="text" name="name">
<label for="password">Your Form label</label>
<input type="password" name="password>
As Others have suggested <label></label> tag is other option that you can use.
Some of it's use cases are as follows:
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>
<label>
Name : <input type="text" name="lastname" />
</label>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
i'm making a html form from a pdf file. Attached is a screenshot
The input fields was different width. Is there a better way to do this form using css or jquery for the width.
Here is my fiddle
http://jsfiddle.net/cancerian73/amW5c/
<p>
<label class="lbl1">Name: (as it appears on passport):</label>
<input name="" type="text" class="inpt1" />
</p>
<p>
<label class="lbl1">Address:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">Apt.#:</label>
<input name="" type="text" class="inpt1" />
</p>
<p>
<label class="lbl1">City:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">State:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">Zip:</label>
<input name="" type="text" class="inpt1" />
</p>
Thanks
San