Below is the full body code however it has been broken down using div so all looks good up to the one part where I have decided to justify the boxes however still being new to this Ijust cannot get it to justify however align="centre" align="left" align="right" works fine the part that i needto be tidied up and balanced out is:
<div align="justify"> Street Number:
<input name="xfg" type="text" disabled id="Strn" value="" readonly>
<br>
Street Name: <input type="text" disabled id="Strna" readonly><br>
Suburb:
<input type="text" disabled id="Subu" readonly><br>
Town: <input type="text" disabled id="Town" readonly><br>
Code: <input type="text" disabled id="Code1" readonly><br>
Region: <input type="text" disabled id="Region" readonly><br>
Country: <input type="text" disabled id="Country" readonly ><br></div>
full div:
<body bgcolor="#000000" text="#FFFFFF">
<div id="container" style="width:1000px">
<div id="header" style="margin-bottom:0;left:50%;">
<div align="center"><img src="Logo.png" align="middle"></div>
</div>
<div id="menu" style="width:50%; height:410px; float:left">
<div align="center">
<input type="button" value="Get Address" onclick="codeLatLng()">
<input type="button" value="reset" onclick="reset()">
<input type="button" value="Get GPS" onclick="codeAddress()"><br>
GPS: <input id="latlng" type="text" value="-00.000000, 00.000000">
Address:
<input id="pladd" type="text" value="">
<br>
<div align="justify"> Street Number:
<input name="xfg" type="text" disabled id="Strn" value="" readonly>
<br>
Street Name: <input type="text" disabled id="Strna" readonly><br>
Suburb:
<input type="text" disabled id="Subu" readonly><br>
Town: <input type="text" disabled id="Town" readonly><br>
Code: <input type="text" disabled id="Code1" readonly><br>
Region: <input type="text" disabled id="Region" readonly><br>
Country: <input type="text" disabled id="Country" readonly ><br></div>
Full Address: <br>
<textarea cols="30" rows="7" readonly id="fulla"></textarea>
<br>
</div>
</div>
<div id="aside" style="width:50%;height:410px;position:right"> </div>
</div>
<div id="footer" style="width:1000px;clear:both;text-align:center;"">
This is a WIP project, Some functions does not work 100% as yet and may be subject to change
</div>
</body>
You can't write it by html, because it is a css rule.
#your_element{
text-align: justify;
}
Managed to fix it as per below using "div align="center" " as well as using line breaks adding the Text above the Boxes instead of next to them
<div id="Menu" style="width:25%; height:550px; Float:left;">
<div align="center">
<input type="button" value="Get Address" onclick="codeLatLng()">
<input type="button" value="reset" onclick="reset()">
<input type="button" value="Get GPS" onclick="codeAddress()"><br>
<font> <font1> * </font1> GPS: (decimal degree) </font> <br><input id="latlng" type="text" value=""><br>
<font> Address:</font><br><input id="pladd" type="text" value="">
<br>
<div id="ressults1" style="text-align:center" >
<font> Street Number:</font><br><input name="xfg" type="text" disabled id="Strn" value="" readonly>
<br>
<font> Street Name:</font> <br><input type="text" disabled id="Strna" readonly><br>
<font> Suburb:</font> <br>
<input type="text" disabled id="Subu" readonly><br>
<font>Town:</font> <br><input type="text" disabled id="Town" readonly><br>
<font> Code: </font><br><input type="text" disabled id="Code1" readonly><br>
<font> Region: </font><br><input type="text" disabled id="Region" readonly><br>
<font> Country: </font><br><input type="text" disabled id="Country" readonly ><br>
<font> Full Address: <br></font>
<textarea cols="30" rows="7" readonly id="fulla"></textarea></div>
Related
I'm just learning how forms, inputs, and fieldsets are working, so I'm trying to make replicate the image above with my own code. So far, I have been able to figure out most of it, but I don't know how to properly put the button in line with the bottom of the third div. I tried a span tag with vertical-align: bottom, but that did not work. Also, I tried to make a div and use vertical-align bottom, which didn't work either. I think I just have a poor understanding of vertical-align, so if you could help it would be greatly appreciated.
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="float: left;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
3 issues:
1: you were missing a " on your body tag
2: when you use float:left you take the element out of the flow of the dom. In this case it's better to use display:inline-block
3: add display:block, margin-left: your a tag
NOTE: your form looks pretty good.
a{
display:inline-block;
margin-left:10px;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="display:inline-block;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
But a better way is to use flex:
#container{
display:flex;
justify-content:space-around;
align-items:bottom;
align-items:flex-end;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div id='container'>
<div >Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div > Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div> Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button> </div>
</fieldset>
</form>
</body>
You should use label tags here for all your field label.
Each radio button list should also bee in it's own fieldset
Also don't use tags like br or elements like for spacing, user margin or padding instead.
Let's now encapsulate the radio buttons and the labels in a label tag. That will help up align the link. Don't use a button in a link, it's invalid HTML and can result in odd behavior. Instead, style the link appropriately, I'd keep it looking like a link as it is an actual link to an external site opening in a new tab.
body {
background-color: #EEEEEE
}
.flex {
display:flex;
}
label.wide {
padding-right: 1em;
}
label {
white-space:nowrap;
padding-bottom:0.5em;
display:inline-block;
}
fieldset fieldset {
border: none;
padding-bottom:0;
}
#paymentShippingFields fieldset label {
display: block;
padding-bottom:0;
}
#paymentShippingFields fieldset {
border:none;
width:33%;
}
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
<fieldset id="nameField">
<label class="wide">First Name: <input type="text" name="first" placeholder="Joey" size="25"></label>
<label>Last Name: <input type="text" name="last" placeholder="Shmoey" size="25"></label>
</fieldset>
<fieldset id="addressField">
<label>Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30"></label>
<label>State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2"></label>
<label>City: <input type="text" name="city" placeholder="York"></label>
<label>Zip: <input type="text" name="zip" placeholder="17402" maxlength="5" size="8"></label>
</fieldset>
</fieldset>
<fieldset style="width: 750px;" id="paymentShippingFields">
<legend>Payment and Shipping</legend>
<div class="flex">
<fieldset>
<legend>Payment:</legend>
<label><input type="radio" name="payment" value="Visa">Visa</label>
<label><input type="radio" name="payment" value="MasterCard">MasterCard</label>
<label><input type="radio" name="payment" value="Paypal">Paypal</label>
</fieldset>
<fieldset>
<legend>Shipping:</legend>
<label><input type="radio" name="shipping" value="Priority $7.99">Priority %7.99</label>
<label><input type="radio" name="shipping" value="Standard $3.99">Standard $3.99</label>
<label><input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</label>
</fieldset>
<fieldset>
<legend>Discounts:</legend>
<label><input type="checkbox" name="discounts" value="AAA">AAA</label>
<label><input type="checkbox" name="discounts" value="AARP">AARP</label>
<label>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member
Join Now!
</label>
</fieldset>
</div>
</fieldset>
</form>
Hello I'm pretty new to coding and while working on a project I tried to make a form with a submit and reset button, but when testing the form it doesn't work on the computer or mobile. Thank you for viewing this.
enter code here
<form id="form" action="contactform.php" method="post">
<label for="topic">Message Topic: </label>
<select name="topic">
<option value="Memberships">Memberships</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
<br><br>
<label for="Name">Name: </label>
<br>
<input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
<input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
<br><br>
<label for="email">Email: </label><br>
<input name="Email" id="email" type="email" size="25" required><br>
<label for="phone">Phone Number: </label><br>
<input name="Phone" id="phone" type="tel" size="12" required>
<br><br>
<label for="message">Enter a Message Here:</label>
<br>
<br><textarea name="messagebox" id="message"></textarea>
<br><br>
<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>
<br>
</form>
</div>
</body>
<script>
$(document).ready(function(){
$(#submit).on('click touch', function () {
alert("You are about to SUBMIT this form. Is that ok?");
});
});
</script>
The Problem is in your syntax. Change it to:
<button type="submit" id="submit">Submit</button>
<button type="reset" id="clear">Clear</button>
or
<input type="submit" id="submit" value="submit">
<input type="reset" id="clear" value="clear">
I just checked it. Seems like it works fine
Have a look at it:
https://codepen.io/kap1l/pen/gOYjjRZ?editors=1000
Thanks,
Also in submit and reset type you are using <input>
but closing is
</button>
Change both to either
<input></input>
or <button></button>
The problem is you didn't assign single quotes or double quotes in the $(#submit).
Change '#submit' to the id of the form and change 'click touch' to 'submit'.
<script>
$(document).ready(function(){
$('#form').on('submit', function () {
alert("You are about to SUBMIT this form. Is that ok?");
return true;
});
});
</script>
You have couple of issues in your code
Remove the closing tags </button>, firstly because you do not have corresponding opening tags for them, secondly you need not use them as you already achieved the same by using <input> elements.
JQuery issue, you need to enclose id within double quotes/single quotes
$(#submit) should be $("#submit")
Here is the working code JSFiddle
Do this
<button type="button" id="submit">Submit</button>
<button type="button" id="clear">Clear</button>
$("#submit").on('click', function () {
instead of
<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>
$(#submit).on('click touch', function () {
In your html, u did some mistakes like for submit buttons, you started with <input> and trying to close it with <button>
so replace it with
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="clear" value="Clear"/>
In script while using a selector please put the selector inside "" OR '' like $('#submit') insted of using it $(#submit)
$(document).ready(function(){
$('#submit').on('click', function () {
alert("You are about to SUBMIT this form. Is that ok?");
});
});
label{
font-size:20px;
margin-right:20px;
}
textarea
{
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="contactform.php" method="post">
<table>
<tr>
<td> <label for="topic">Message Topic: </label></td>
<td>
<select name="topic">
<option value="Memberships">Memberships</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td> <label for="Name">Name: </label></td>
<td>
<input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
<input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
</td>
</tr>
<tr>
<td> <label for="email">Email: </label></td>
<td>
<input name="Email" id="email" type="email" required>
</td>
</tr>
<tr>
<td> <label for="phone">Phone Number: </label></td>
<td>
<input name="Phone" id="phone" type="number" required>
</td>
</tr>
<tr>
<td> <label for="message">Enter a Message Here:</label></td>
<td>
<textarea name="messagebox" rows=5 id="message"></textarea>
</td>
</tr>
<tr>
<td> <input type="submit" id="submit" value="Submit"/>
<input type="reset" id="clear" value="Clear"/>
</td>
</tr>
</table>
</form>
I am using Cimy User Extra Fields plugin for extra fields in Wordpress registration but I would like to make it in two columns so users would not scroll since now I have to many fields. I have problem in how to implement it in code. When I am editing via Inspect element it looks like this
<form name="registerform" id="registerform" action="http://test.com/wp-login.php?action=register" method="post" style="
position: absolute;
margin-left: -200px;
">
<div style="float:left;width: 350px;" ;=""><p>
<label for="user_login">Username<br>
<input type="text" name="user_login" id="user_login" class="input" value="" size="20"></label>
</p>
<p>
<label for="user_email">E-mail<br>
<input type="text" name="user_email" id="user_email" class="input" value="" size="25"></label>
</p>
<!--
Start code from Cimy User Extra Fields 2.5.1
Copyright (c) 2006-2013 Marco Cimmino
http://www.marcocimmino.net/cimy-wordpress-plugins/cimy-user-extra-fields/
-->
<input type="hidden" name="cimy_post" value="1">
<p id="cimy_uef_wp_p_field_1">
<label for="cimy_uef_wp_1">Password</label><input type="password" name="cimy_uef_wp_PASSWORD" id="cimy_uef_wp_1" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_wp_p_field_2">
<label for="cimy_uef_wp_2">Password confirmation</label><input type="password" name="cimy_uef_wp_PASSWORD2" id="cimy_uef_wp_2" class="cimy_uef_input_27" value="" maxlength="100">
</p></div>
<div style="float:right;width: 350px;padding-left: 30px;" ;="">
<p id="cimy_uef_wp_p_field_3">
<label for="cimy_uef_wp_3">First name</label><input type="text" name="cimy_uef_wp_FIRSTNAME" id="cimy_uef_wp_3" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_wp_p_field_4">
<label for="cimy_uef_wp_4">Last name</label><input type="text" name="cimy_uef_wp_LASTNAME" id="cimy_uef_wp_4" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_p_field_1">
<label for="cimy_uef_1">Company</label><input type="text" name="cimy_uef_COMPANY" id="cimy_uef_1" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_p_field_2">
<label for="cimy_uef_2">Industry </label><select name="cimy_uef_INDUSTRY" id="cimy_uef_2" class="cimy_uef_input_27">
<option value="Consulting">Consulting</option>
<option value="Events and PR">Events and PR</option>
<option value="Other industries">Other industries</option></select>
</p>
<br>
<!--
End of code from Cimy User Extra Fields
-->
</div>
<p id="reg_passmail">A password will be e-mailed to you.</p>
<br class="clear">
<input type="hidden" name="redirect_to" value="">
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Register"></p>
</form>
NOTE: I would like first div to open before user_login to close after cimy_uef_wp_p_field_2
Is there any way to make something like this since user_login is default wp-login.php field and cimy_uef_wp_p_field_2 is Cimy User Extra Fields plugin field
For some reason the focus keeps getting shifted from any of the address field to the credit card field on my HTML form.
So onclick of address fields, the focus goes back to the credit card field.
It's probably something really simple, but can anyone help?
http://jsfiddle.net/xYbsz/
<form name='order-validation'>
<p><label>email: <input type="email" title="email" id="emailAddress" name="email" value=""></label></p>
<p>
Phone: <select name="countrycode" style="display: inline;">
<option value="44" selected>UK (+44)</option>
<option value="1">USA (+1)</option>
<option value="213">Algeria (+213)</option>
</select><input type="tel" name="phone" id="id_tel" required pattern="(\+?\d[-.]*){7,13}" title="international, national or local phone number"/></p>
<img class="cc-img" id="visa-card-img" src="visa.jpg" />
<img class="cc-img" id="mastercard-card-img" src="mastercard.jpg" />
<img class="cc-img" id="amex-card-img"src="american-express.jpg" />
<p><label>credit card: <input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
<img class="cc-security-code" id="visa-sec-code" src="cvv.gif" />
<img class="cc-security-code" id="amex-sec-code" style="display: none;" src="amex-sec-code.gif" /><br />
Address:
<input type="text" name="newCreditCardStreet" size="35" tabindex="5" value="" id="id_creditCardStreet"><br />
Town/City:
<input type="text" name="newCreditCardLocality" size="35" tabindex="5" value="" id="id_creditCardLocality"><br />
Country:
<input type="text" name="country" id="id_country">
<p><input type="button" name="submit" value="Submit" /></p>
<p id="test"></p>
</form>
The label tag for cc_number is not closed.
<label for="cc_number">credit card:</label>
<input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
Also I noticed in the markup the label tags are wrapping the inputs. This is unnecessary:
<label>email:
<input type="email" title="email" id="emailAddress" name="email" value="">
</label>
Instead use the for attribute:
<label for="emailAddress">email:</label>
<input type="email" title="email" id="emailAddress" name="email" value="">
Working Example http://jsfiddle.net/xYbsz/1/
I'm trying to make a simple HTML contact form, but when I upload the HTML page to the internet, the send and clear buttons are not showing up - they're invisible.
The funny thing is if I hover the mouse over where they are supposed to be, I can see that there is a button there.
Why could this be?
<form action="contact.php" method="post">
<div>
<label for="contactname">Name</label>
<input type="text" name="contactname" class="textfield" id="contactname" value="" />
<span class="require"> *</span>
<label for="contactsubject">Subject</label>
<input type="text" name="contactsubject" class="textfield" id="contactsubject" value=""/>
<span class="require"> *</span>
<label for="contactemail">Your E-mail</label>
<input type="text" name="contactemail" class="textfield" id="contactemail" value="" />
<span class="require"> *</span>
<label for="contactmessage">Your Message</label>
<textarea name="contactmessage" id="contactmessage" class="textarea" cols="8" rows="12"></textarea>
<span class="require"> *</span>
<input type="submit" value="Send">
<input type="reset" value="Clear">
add / end slash to both send & clear
<input type="submit" value="Send"/>
and
<input type="reset" value="Clear"/>
or you can also do like this:
<input type="submit" value="Send"></input>
<input type="reset" value="Clear"></input>
<input> is starting tag
</input> is ending tag
UPDATE 1: answer for how to use image for submit button
change input type to "image"
<input type="image" value="submit" src="submit1.jpg" alt="submit Button" onMouseOver="this.src='submit1.jpg'">