input element is used to create interactive controls for web-based forms in
order to accept data from the user
input element is one of the most powerful and complex in all of HTML
due to the sheer number of combinations of input types and attributes
<label for="name">Name (4 to 8 characters):</label>
<input type="text"
id="name"
name="name"
required
minlength="4"
maxlength="8"
size="10" />
<input
type="button"
value="Add to favorites" />
input elements of type=button are rendered as simple push
buttons
input type=submit, and input type=reset
are used to submit and reset forms, respectively
<fieldset>
<legend>Choose your monster's features:</legend>
<div>
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns" />
<label for="horns">Horns</label>
</div>
</fieldset>
value
input elements share
checked
HTMLInputElement's checked IDL attribute is
updated
<p>Choose your colors:</p>
<div>
<input type="color" id="bgColor" name="bgColor" value="#e66465" />
<label for="bgColor">Background Color</label>
</div>
<div>
<input type="color" id="txtColor" name="txtColor" value="#ffffff" />
<label for="txtColor">Color</label>
</div>
<div id="change">Hello World! </div>
// color select
document.querySelector("#change").style.backgroundColor = document.querySelector("#bgColor").value
document.querySelector("#change").style.color = document.querySelector("#txtColor").value
document.querySelector("#change").style.textAlign = "center";
document.querySelector("#bgColor").addEventListener('input', function () {
document.querySelector("#change").style.backgroundColor = this.value;
})
document.querySelector("#txtColor").addEventListener('input', function () {
document.querySelector("#change").style.color = this.value;
})
Choose your colors:
<label for="start">Start date:</label>
<input
type="date"
id="start"
name="trip-start"
value="2018-07-22"
min="2018-01-01"
max="2018-12-31" />
input elements of type email are used to let the user
enter and edit an email
address, or, if the multiple attribute
is specified, a list of email addresses
input value is automatically validated to ensure that it's either
empty or a
properly-formatted email address (or
list of addresses) before the form can be submitted.
valueinput element's value attribute contains a string which is
automatically validated as conforming to email syntax.
More specifically, there are three possible value formats that will pass validation:
username@domain or
username@domain.tld. Can also validate with regular expression
multiple attribute is specified, the value can be a list
of
properly-formed comma-separated email
addresses
maxlengthminlengthmultiplesize
placeholder
<form
method="post"
action="https://mysite.tom"
enctype="multipart/form-data">
<div>
<label for="myfile">Choose file to upload</label>
<input type="file" id="myfile" name="myfile">
</div>
<div>
<input type="submit">
</div>
</form>
input type=filemethod=POST
enctype="multipart/form-data"
accept
<input
type="hidden"
id="name"
name="param1"
value="Hello">
<input
id="mybtn"
type="image"
src="../images/myButton2.png"
alt="Blue Button">
input
elements of type hidden let web developers include data that cannot be seen or modified
by users when a form is submitted
<input
type="image"
src="../images/myButton2.png"
alt="click me"
formaction="https://phptwo.tomgdow.com"
formmethod="GET">
input elements of type image are used to create graphical
submit buttons, i.e. submit buttons that take the form of an
image rather than text
input type="image"
extra data
points are submitted to the
server automatically by the browser — x and y
value
input elements of type images do not accept
value attributes
src
attribute
altalt attribute provides an alternate string to use as the button's label
if the image cannot be shown
formaction
action attribute on the
form element
d that owns the input
input type=submit and
button elements
formenctype
application/x-www-form-urlencodedencodeURI()
multipart/form-data
FormData API to manage the data, allowing
for files to be submitted to the server.
input elements of
type file
text/plainformenctype attribute overrides the
owning form's action attribute
formmethod
getpostdialogformtarget
_self_blank_parent_top
<label for="number">Number (0-100, step 10):</label>
<input
type="number"
placeholder="x10"
step="10"
min="0"
max="100"
id="number" />
<output id="mydiv"></output>
document.getElementById("number").addEventListener('input', function () {
document.getElementById('mydiv').value = this.value;
})
input elements of type number are used to let the user
enter a number
<form action="https://php.tomgdow.com" method="post" id="form_one">
<label for="login-name">name</label>
<input type="text" id="login-name" name="param1">
<label for="password">password</label>
<input type="password" id="password" name="param2" required>
<input type="submit" value="Submit">
</form>
<div>
<output id="out-login-name"></output>
<output id="out-password"></output>
</div>
async function sendData() {
const formData = new FormData(form_one);
try {
const response = await fetch("https://php.tomgdow.com", {
method: "POST",
body: formData
});
let result = await response.text();
console.log(result);
let responseArray = result.split('&');
document.getElementById('out-login-name').value = responseArray[0];
document.getElementById('out-password').value = responseArray[1];
} catch (e) {
console.error(e);
}
}
document.getElementById('form_one').addEventListener('submit', function (event) {
event.preventDefault();
sendData();
});
document.getElementById('login-name').addEventListener('focus', function () {
document.getElementById('out-login-name').value = "";
document.getElementById('out-password').value = "";
})
document.getElementById('password').addEventListener('focus', function () {
document.getElementById('out-login-name').value = "";
document.getElementById('out-password').value = "";
})
<form>
<div class="controls">
<label for="id">User ID:</label>
<input type="text" id="id" name="id" />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</div>
</form>
input elements of type reset are rendered as buttons,
with
a default click event handler that resets all inputs in the
form to their initial values.
<label for="site-search">Search the site:</label> <input type="search" id="site-search" name="q" /> <button>Search</button>
input elements of type search are text fields designed for
the user to enter search queries into
<form>
<label for="url">Enter a URL:</label>
<input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required />
</form>
input elements of type url are used to let the user enter
and edit a URL
input value is automatically validated to ensure that it's either
emtpty string
or a properly-formatted URL before the form
can be submitted
url input falls
back to being a standard text input