I have form, I want to post through multipart/form-data.
How to use html to specify each fields' type.
<html>
<head>
<title>
New Student
</title>
</head>
<body>
<form action="http://10.128.157.12:8080/student" method="post" enctype="multipart/form-data">
student first name: <input type="text" size="100" name="firstname" value="Michael"/><br>
student last name: <input type="text" size="100" name="lastname" value="William"/><br>
student age: <input type="text" size="100" name="age" value="34" /> <br>
<input type="submit" value="Submit" autofocus="autofocus" />
</form>
</body>
</html>
Related
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>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" placeholder="Not required">
<input type="text" name="" placeholder="Required" required>
<input type="submit" name="" value="Submit">
</body>
</html>
So I'm sorry for asking this but I'm learning HTML for Django and this code seems right to me but I don't get any messages/popup when the required field is empty and I click on submit button.
You need to put your inputs inside the form tag.
<form>
<input type="text" name="" placeholder="Not required" />
<input type="text" name="" placeholder="Required" required />
<input type="submit" name="" value="Submit" />
</form>
I made a begining of a question submit page:
<!DOCTYPE html>
<html>
<head>
<title>Question</title>
</head>
<body>
<from action="contformer.php" method="post">
<input name="mail" type="text" size="50" placeholder="Please enter your email, so we can contact you back."><br>
<input type="text" name="sub" placeholder="Enter the subject here"><br>
<input type="text" name="q" size="50"><br>
<input type="submit" value="Submit your question">
</form>
</body>
</html>
Does anyone know why it does nothing when i click the "Submit your question" button?
You have an syntax error
There should be form and not from action
Please change <**from** action="contformer.php" method="post"> to form
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".
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