The following code should have all the fields with input required, but when I run it in Chrome Version 26.0.1410.64 m, after I press the submit button, only the first field (e.g., name) is labeled as "This field is required." I used the example here: http://www.raymondcamden.com/demos/2012/jul/30/round2/register.html
save the html, and his local javascript, the example code works properly except the "This field is required." is in red. What's wrong here? Please help :(
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).on("pageshow", "#somePage", function() {
$("#someForm").validate();
});
</script>
</head>
<body>
<div data-role="page" id="somePage">
<div data-role="content">
<form id="someForm" method="get" action="">
<fieldset>
<label>Name</label>
<input id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label">E-Mail</label>
<input id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label">Your comment</label>
<textarea id="comment" cols="22" class="required"></textarea>
</fieldset>
<input type="submit" value="Submit"/>
</form>
</div> <!--content-->
</div>
</body>
</html>
You have double quotes in label tags that make your html invalid
<label">E-Mail</label>
^
Use for attribute in label tags and name in inputs
This being said change
<fieldset>
<label>Name</label>
<input id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label">E-Mail</label>
<input id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label">Your comment</label>
<textarea id="comment" cols="22" class="required"></textarea>
</fieldset>
to
<fieldset>
<label for="name">Name</label>
<input name="name" id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label for="email">E-Mail</label>
<input name="email" id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label for="comment">Your comment</label>
<textarea name="comment" id="comment" cols="22" class="required"></textarea>
</fieldset>
Here is jsFiddle
Related
I have been trying to test the required attribute using Jquery.
I am enabling it for all the inputs with "class=keyclass"
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".keyclass").attr('required',true)
</script>
<body>
<form id="form1" >
<div id='key'>
<label for="firstname"><strong>First Name </strong></label>
<input class="keyclass" id='firstname' type="text" placeholder="Enter name " name="keyvault">
<label for="name"><strong>Last Name</strong></label>
<input class="keyclass" id='lastname' type="text" placeholder="Enter name" name="name" >
<input type="hidden" placeholder="Hidden Field" name="value">
<label for="requestoremail"><strong>Requestor's Email Address</strong></label>
<input class="keyclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
<label for="purpose"><strong>Purpose</strong></label>
<input class="keyclass" id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
</div>
<button form="form1">Submit</button>
</form>
</body>
</html>
The strange thing is that it works in jsfiddle but not my own browser. Is there anything wrong in the code?
hello script tag move to bottom
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="form1" >
<div id='key'>
<label for="firstname"><strong>First Name </strong></label>
<input class="keyclass" id='firstname' type="text" placeholder="Enter name " name="keyvault">
<label for="name"><strong>Last Name</strong></label>
<input class="keyclass" id='lastname' type="text" placeholder="Enter name" name="name" >
<input type="hidden" placeholder="Hidden Field" name="value">
<label for="requestoremail"><strong>Requestor's Email Address</strong></label>
<input class="keyclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
<label for="purpose"><strong>Purpose</strong></label>
<input class="keyclass" id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
</div>
<button form="form1">Submit</button>
</form>
<script>
$(".keyclass").attr('required',true);
</script>
</body>
</html>
I have an HTML Form with some fields. I want to add two buttons to it. First two recreate a new set of all the fields in this form on the next line. Second to delete any of the newly recreated set of fields.
<form action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
</form>
Yes, you can use only html, or you can use JS or if you want you can use HTML and JS to make it more dynamic,:-
You can refer this
you can use var cln=form.cloneNode(true); to clone a particular element or a whole form and then just append it to the body of the document using document.body.appendChild(cln);
run the code snippet to see how it works
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function copyForm(){
var form=document.getElementById("form1");
var cln = form.cloneNode(true);
document.body.appendChild(cln);
}
function deleteForm(event){
event.parentElement.remove();
}
</script>
</head>
<body>
<input type="button" name="copy" value="add new form" onclick="copyForm();">
<form id="form1" action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
<input type="button" value="delete form" onclick="deleteForm(this);" />
</form>
</body>
</html>
Some websites have a greyish text written in the blanks next to the credentials required, for exampl Gmail (I'm not allowed to add pictures, sadly), however, when you click in the box, the greyish text disappears. I have the following code in HTML but I don't know whether it's possible to add that feature or not:
<html>
<head>
<title>My code</title>
</head>
<body>
<h1>Registration form</h1>
<form>
<fieldset>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email</label>
<input type="email" id="Email" name="Email"><br><br>
<label for="password">Password</label>
<input type="password" id="Password" name="Password">
</fieldset>
</form>
</body>
</html>
When I run this code, the boxes/fields appear empty and don't show the greyish text (like 'Email'). Can anyone tell me how to add that feature using HTML?
You can use placeholder attribute.
<input type="text" placeholder="hello">
Note:
You can change the styles of the placeholder using css ::placeholder pseudo element.
Edit:
If you want to hide the placeholder when focused do this:
#myInput:focus::placeholder{
color: transparent;
}
<input type="text" placeholder="hello" id="myInput">
You need to add the attribute called placeholder in html
<html>
<head>
<title>My code</title>
</head>
<body>
<h1>Registration form</h1>
<form>
<fieldset>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="First Name"><br><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Last Name"><br><br>
<label for="email">Email</label>
<input type="email" id="Email" name="Email" placeholder="Email"><br><br>
<label for="password">Password</label>
<input type="password" id="Password" name="Password" placeholder="Password">
</fieldset>
</form>
</body>
</html>
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.
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".