I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<style>
.name {
width: 130px;
}
</style>
</head>
<body>
<h1> Test </h1>
<form>
<fieldset class="name">
<label for="firstName">Name</label> <input type="text" name="firstName" id="firstName" required> <br /> <br/>
<label for="last_name">Surname</label> <input type="text" name="last_name" id="last_name" required> <br /> <br/>
</fieldset>
<br />
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
I want to make the the Free text and rank go next to the fieldset name (with some space) and the button to be in the middle of the page.
How can I make it work?
For the previous code I want to make this part to be next to the fieldset:
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
And the submit button be and the middle of the page.
Thank you in advance.
I did this really easily with some searches like "Put two divs next to each other" and "Center a div".
http://pastebin.com/SLQfGpQC
Related
I made a short and basic website and the title is showing in the page. I put the title inside head when i wrote it but it is inside body when i use the inspect tool on it. Screenshot of code editor and inspect tool on chrome
Code is below:
<head>
<tittle>Race registration form</tittle>
</head>
<body>
<h1>Race registration!</h1>
<form action="/Registration_form">
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name">
</p>
<p>
Select a race:
</p>
<p>
<input type="radio" id="Fun Run 5K" name="Race" value="Fun Run 5K">
<label for="Fun Run 5K">Fun Run 5K</label>
</p>
<p>
<input type="radio" id="Half Marathon" name="Race" value="Half Marathon">
<label for="Half Marathon">Half Marathon</label>
</p>
<p>
<input type="radio" id="Full Marathon" name="Race" value="Full Marathon">
<label for="Full Marathon">Full Marathon</label>
</p>
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="password">Password</label>
<input tupe="password" id="password" name="password"> <br>
<p>
<button type="submit">Register!</button>
</p>
</form>
</body>
</html>```
You have a typo: tittle has an extra t there, and needs to be title.
Because <tittle /> is not a valid tag that belongs to head area, it's bleeding into body. Fix the typo, and it'd go away.
I have one html page (index.html) I am trying to link to another page (createprofile.html) using a button on the index page. I've tried onclick and using href, but when I click the button, and error appears on a blank white page that says Cannot GET /action_page.php?.
I've tried several ways to link these but it's simply not working...
Here is the index.html with the button I am trying to link (signupbtn).
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
`enter code here`<link rel="stylesheet" href="page.css">
</head>
<body>
<form action="action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Welcome to Mission Connect!</h1>
<p>Please create an account.</p>
<hr>
<label for="email"><b>Email</b></label> <br>
<input type="text" placeholder="Email Address" name="email" required>
<br>
<br>
<label for="password"><b>Password</b></label> <br>
<input type="password" placeholder="New Password" name="password" required>
<br>
<br>
<label for="password"><b>Repeat Password</b></label>
<input type="password" placeholder="Re-enter New Password" name="password-repeat" required>
<p>By creating an account you agree to our Terms & Privacy. </p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<a href="createprofile.html"><button type="submit" class="signupbtn">Create My Account</button>
</a>
</div>
</div>
</form>
</body></html>
And this is the html page (createprofile.html) I'm trying to link it to.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<h1>Welcome to Your Mission Connect Profile. </h1>
<br>
Select Profile Picture:
<br>
<br>
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<br>
<br>
<form>
First Name:<br>
<input type="text" name="firstname">
<br>
<br>
Last Name:<br>
<input type="text" name="lastname">
<br>
<br>
Gender:
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
Location:<br>
<input type="text" name="location">
<br>
<br>
Home Congregation:<br>
<input type="text" name="homecongregation">
<br>
<br>
Status:
<br>
<input type="radio" name="status" value="Preparing" checked> Preparing (Pre-Missionary)<br>
<input type="radio" name="status" value="InTheField"> In the Field ( (Current Missionary)<br>
<input type="radio" name="status" value="Supporting"> Supporting (Missionary Supporter)<br>
<br>
<br>
Language(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Location(s) of Interest:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Duration:
<br>
<input type="radio" name="duration" value="shortterm" checked>
Short- Term<br>
<input type="radio" name="duration" value="longterm"> Long-Term<br>
<input type="radio" name="duration" value="undecided"> Undecided<br>
<br>
<br>
Why are you interested in missions?:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Describe your past missions experience(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
</form>
How can I make these two pages link?
your form action is /action_page.php where is your action_page.php ? just remove to form action action_page.php if you don't have any form action.
If you're using HTML:
<form action="action_page.php"
The same thing would go with JSON but I wouldn't recommend.
If you want a button with a hyperlink for <form action:
Stack Overflow
Preview:
Stack Overflow
Try using these methods.
My question is pretty basic. its about the placement of my radio button
The buttons are slightly below its adjacent text. how to position it exactly in front of its text
Click at the link of sign up form as it provides the image of my problem
sign up form
see this form the radio buttons are exactly before the text
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form >
<label>Name</label>
<input type="text">
<br>
<label>Email</label>
<input type="email" name="">
<br>
<label>Date</label>
<input type="date" name="">
<br>
<label>Password</label>
<input type="password" name="">
<br>
<label>Color</label>
<input type="color" name="">
<br>
<label>Select Any One</label>
<input type="checkbox" name="">Travel
<input type="checkbox" name="">Food
<input type="checkbox" name="">Hotel
<br>
<label>Select Gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">FeMale
<br>
<select>
<option>Select Box</option>
</select>
<br>
<textarea rows="4" cols="50"></textarea>
</form>
</body>
</html>
Removing width:100% from the following code solved the problem in your jsfiddle
*{
margin:0px auto;
}
Its because that style was applicable for all the elements the text and radio button was misplaced
Hey guys I'm getting a strange XML error I just can't seem to find the solution too, can any of you see the error?
Edit: I have added the relative code, The project is a form that validates inputs using basic HTML5 pattern attributes etc.
XML Parsing Error: not well-formed
Location: file:///C:/Users/Michael/Desktop/assignment/customer.xml
Line Number 47, Column 81: <input type="text" id="firstname" maxlength="20" pattern="[A-Za-z]+" required />
----------------------------------------------------------------------------------------------^
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="This document is about a Pizza meal being offered at a restaurant " />
<meta name="keywords" content="
Assignment1 5570891 Restaurant Meal" />
<meta name="author" content="[Michael Freeman]" />
<link href= "styles/Styles.css" rel="stylesheet" type="text/css" />
<!--<script src="jquery.js"></script>
<script type="text/javascript" src="alternative.js"></script>-->
<script type="text/javascript" src="product.js"></script>
<title> Michael's Pizza Assignment </title>
</head>
<body>
<!-- Contains the header information that sits on top of the page-->
<header>
<h1>
Order Online
</h1>
</header>
<!-- The navigation bar and "current" class which is used in the CSS-->
<nav>Pizza|Extras
</nav>
<!-- Contains the information in the top bar of the page, this bar maintains its appearance throughout all pages and informs the user of the purpose of the page-->
<nav class="orderbar"><p>
Register|Complete payment
</p>
</nav>
<!-- Contains the information in the second bar of the page, this bar maintains its appearance throughout all pages-->
<article class="secondbar">
<h3>Please fill out the following form to register
</h3>
</article>
<section>
<form id="registerform" method="post" action="http://mercury.ict.swin.edu.au/it000000/formtest.php">
<fieldset id="person">
<legend>Customer registration</legend>
<p><label for="firstname">First Name:</label>
<input type="text" name="name" id="firstname" maxlength="20" pattern="[A-Za-z]+" required />
</p>
<p><label for="surname">Surname:</label>
<input type="text" name="surname" id="surname" maxlength="20" pattern="[A-Za-z]+" required />
</p>
<p><label for="age">Date of birth:</label>
<input type="text" name="age" id="age" required pattern="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d" placeholder="DD/MM/YYYY" />
</p>
<p><label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Your#email.here" required/>
</p>
<p><label for="phonenumber">Phone number:</label>
<input type="tel" name="phonenumber" id="phonenumber" maxlength="10" placeholder="Mobile number:04xxxxxxxx" required/>
</p>
</fieldset>
<fieldset>
<legend>Address details</legend>
<p><label for="address">Residential address</label>
<input type="text" name="raddress" id="raddress" maxlength="40" requried/>
</p>
<p><label for="suburb">Suburb/Town</label>
<input type="text" name="suburb" id="suburb" maxlength="20" required/>
</p>
<p><label for="state">State</label>
<select name="state" id="state" required>
<option value="Vic" selected="selected">Vic</option>
<option value="NSW">Nsw</option>
<option value="QLD">Qld</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select></p>
<p><label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" pattern="[0-9]{4}" maxlength="4" required/>
</p>
<p><label>Delivery Address</label>
<input type="text" name="daddress" id="daddress" maxlength="40"/></p>
<p><label>The same as residential address:</label>
<input type="checkbox" name="checkaddress" id="checkaddress" />
</p>
</fieldset>
<p><input type="submit" value="Register" id="submit" />
<input type="reset" value="Reset" />
</form>
</section>
<!-- The footer which contains a link that allows users to email the author of the page-->
<footer><p>Email</p> <a href="mailto:5570891#student.swin.edu.au" >Michael Freeman</a>
</footer>
</body>
</html>
There are no “empty” attributes in XML – required is invalid, it has to be of the form attributename="value".
Convention for converting empty HTML attributes to XHTML is repeating the attribute name as value, required="required".
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