I have the following HTML5 code
<!DOCTYPE html>
<html>
<head>
<title>Learning Input</title>
</head>
<body>
<input type=text value="Enter your name" maxlength="10"> <br>
<input type=checkbox checked>
</body>
</html>
Which is working fine, by the way. The checkbox as expected is checked. However, just after adding one line of code to introduce a password field, this following code makes the checkbox unchecked, even tough i have marked it "checked". This does not make any sense! Am i breaking any HTML5 rule?
The code after adding password field:
<!DOCTYPE html>
<html>
<head>
<title>Learning Input</title>
</head>
<body>
<input type=text value="Enter your name" maxlength="10"> <br>
<input type=password> <br>
<input type=checkbox checked>
</body>
</html>
Help is appreciated. Thanks in advance! :)
your code is correct actually ..working on Chrome, firefox mozilla and IE
<!DOCTYPE html>
<html>
<head>
<title>Learning Input</title>
</head>
<body>
<form>
<input type=text value="Enter your name" maxlength="10"> <br>
<input type=password> <br>
<input type=checkbox checked>
</form>
</body>
</html>
Related
When I put some specific numbers in the HTML input text-box, I can't submit it with the last version of Internet Explorer or Edge. It says "Invalid Number". For exemple, "43.7" is considered as an invalid number.
<!DOCTYPE html>
<head>
<title>TITLE</title>
</head>
<body id="page">
<form method="post" id="myForm">
<p>
<label for="value"></label>
<input type="number" step="0.01" name="value" id="value" min="35" />
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Edit : The problem is apparently related to the "min" value.
No problem appears if we put "30" as min value.
Thank you for your help.
Quentin
You can try this
<input type="number" step="0.1" name="value" id="value" min="35" />
or a regular expression to set the pattern attribute
<input type="number" pattern="^[1-9]\d*(\.\d+)?$" name="value" id="value" min="35" />
You can try this workaround:
$("input[type='button'").click(function(){
console.log("Submitted value " + $("input[type='number'").val());
$("input[type='number'").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<title>TITLE</title>
</head>
<body id="page">
<form method="post" id="myForm">
<p>
<label for="value"></label>
<input type="number" step="0.01" name="value" id="value" min="35" />
</p>
<input type="button" value="Submit" />
</form>
</body>
</html>
I have a form like this,
<form>
Username: <input type="text" name="usrname" required>
<input type="button" value="Post">
</form>
I want a tooltip to pop-up if the user clicks on the button without entering anything in the textbox.
I know it will work if I change the button to like this - <input type="submit" value="Post">. But I don't want to do that.
Did you mean formaction instead of action?
<input type="text" name="usrname" required formaction="action_page.php">
action is a form tag attribute, not inputs's.
Use HTML5
Try like this it will work :
action attribute specifically for form tag. not input tag
<form action="action_page.php">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
Use method "POST" in tag, It will work
<form action="action_page.php" method="POST">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
I figured out how to do this with some jQuery based on an answer from this post.
The following code does exactly what I was looking for,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myForm">
Username: <input type="text" name="usrname" required id="input">
<input type="button" value="Post" id="button">
</form>
<script>
$('#button').click(function(e) {
if ($('#input').val() === "") {
$('<input type="submit">').hide().appendTo('#myForm').click().remove();
}
});
</script>
</body>
</html>
See here for DEMO
I used "required" to validate my form but its not work at IE browser. Is this a common error? How to I solve it? Below is my code :
this is my html code which work prefect at Google Chrome and Firefox browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Import a CSV File with PHP & MySQL</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" >
Subject : <br/>
<input type="text" name="subject" id="subject" required/> <br/>
Choose your file: <br />
<input name="csv" type="file"id="csv" accept=".csv" required/> <br/>
Content : <br/>
<textarea name="message" cols="50" rows="10" required></textarea><br/>
<input type="submit" name="submit" value="Submit" onclick="storeQueEmail()"/>
</form>
</body>
</html>
No. required attr wont work for less then IE10. So you could use plugins for validata the form
Here the plugin I would recommend for you..
http://ericleads.com/h5validate/
http://posabsolute.github.io/jQuery-Validation-Engine/
http://adodson.com/jquery.form.js/
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">
This is the sample html document. The datalist tag is added for the fave input text box. But it does show up. Any ideas?
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="description" content="A simple example"/>
</head>
<body>
<form method="post" action="WorkingWithFormsChapter.html" target="_blank">
<label for="fave">Enther your favourite fruit</label>
<input name="fave" autofocus="true" list="fruitslist"/>
<br/>
<label for="name">Enter your name</label>
<input name="name" placeholder="Your name please" />
<button>Submit Vote</button>
</form>
<datalist id="fruitslist">
<option value="Tasty Apples">Apples</option>
<option value="Juicy Oranges">Juicy Oranges</option>
</datalist>
</body>
</html>
It works; the support for it in some browsers at the moment is not good however.