example
codes:
<img src="../pics/1.jpg" alt="holiday" width="300" height="300">
revision:
<form accept-charset="character_set">
The character_set is a space-separated list of one or more character encodings that are to be used for the form submission.
Common values are UTF-8 - character encoding for Unicode, ISO-8859-1 - character encoding for the Latin alphabet.
In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it.
codes:
<form style="margin-left:5vw;" action="/action_page.php" accept-charset="utf-8">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
codes:
<form style="margin-left:5vw;"action="#" accept-charset="UTF-8">
First name:<input type="text" name="fname">
<br>
Last name:<input type="text" name="lname">
<br>
<input type="submit" value="Submit">
The accept attribute can only be used with <input type="file">. Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.
<input accept="file_extension | audio/* | video/* | image/* | media_type">
To specify more than one value, separate the values with a comma (e.g. <input accept="audio/*,video/*,image/*" />.
codes:
<form style="margin-left:5vw;" action="/action_page.php">
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
<input type="submit">
</form>
codes:
<div style="margin-left:5vw;">
<label for="soundFile">Select an audio file:</label>
<input type="file" id="soundFile" accept="audio/*">
</div>
<div style="margin-left:5vw;">
<label for="videoFile">Select a video file:</label>
<input type="file" id="videoFile" accept="video/*">
</div>
<div style="margin-left:5vw;">
<label for="imageFile">Select some images:</label>
<input type="file" id="imageFile" accept="image/*" multiple>
</div>
It is used to activate/focus an element. Its lvalue must be a single character (a letter or a digit). The shortcut is varying in different browsers:
<element accesskey="character">
character: a single character that specifies the shortcut key to activate/focus the element.
codes:
<a href="https://lwitters.com" accesskey="l">lwitters (key: l)</a><br>
<a href="https://wikipedia.com" accesskey="w">Wikipedia (key: w)</a>
codes:
<a>If you need to relax, press the <strong><u>S</u></strong>tress reliever! /a>
<button accesskey="s">Stress reliever</button>
It can be used in the <form> element.
<form action="URL"></form>
URL is used to specify the URL of the document where the data to be sent after the submission of the form. The possible values of the URL are: 1/absolute URL points to another website link; 2/ relative URL is used to point to a file within a webpage.
After submitting the form, data will sent to the "test.php" page on the server.
codes:
<form style="margin-left:5vw;" action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username"id="Username"><br>
<label for="password">Password: </label>
<input type="password" name="password">
</form><br>
<button style="margin-left:5vw;" onclick="mySubmit()">Submit</button><br>
<p class="spec">After Submitting the form-data will sent to the "test.php" page on the server.</p>
codes:
<form style="margin-left:5vw;" action="/action_first_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="/action_second_page.php">Submit to another page</button>
It provides a text, if a user for some reason cannot view an image (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
It can be used on the following elements:<area >, <img>, <input>. The alt attribute is required for the <img> element. For <input> elements, the alt attribute can only be used with <input type="image">. To create a tooltip for an image, use the title attribute!
<img alt="alternative text">
<area alt="alternative text">
<input alt="alternative text">
alternative text specifies an alternate text for the image.
codes:
<img src="../pics/1.jpg" alt="holiday" width="300" height="300">
Click on the image, and the input will be sent to a page on the server called "/action_page.php".
codes:
<p class="spec">Click on the image, and the input will be sent to
a page on the server called "/action_page.php".</p>
<form style="margin-left: 5vw;" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<input type="image" src="../pics/submit.gif" alt="Submit" width="24" height="24">
If it is set, the script is downloaded in parallel to parsing the page and executed as soon as it is available.
The parsing of the page is interrupted once the script is downloaded completely, and then the script is executed, before the parsing of the rest of the page continues.
The async attribute is only for external scripts (and should only be used if the src attribute is present).
<script async>
Hello World!
codes:
<p id="p1">Hello World!</p>
<script src="demo_async.js" async></script>
How do you do!
codes:
<p id="p1">How do you do! </p>
<script async src="script.js"></script>
It specifies whether a form or an input field should have autocomplete on or off.
When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
<input autocomplete="on|off">
When autocomplete is on, the browser provides input values based on previous values the user has entered. This attribute is available on any element that accepts user input that is either numeric or text. These elements accept the autocomplete attribute: <textarea>, <select>, <input>, <form>.
Fill in and submit the form, then reload the page to see how autocomplete works.
Notice that autocomplete is "on" for the form, but "off" for the e-mail field!
codes:
<form class="spec" style="margin-left:5vw;" action="/action_page.php"
autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit">
</form>
codes:
<form style="margin-left:5vw;" action="#" >
<textarea autocomplete="on" name="message" placeholder="Enter message" rows="3" cols="60"> </textarea> <br>
<button type="submit">Submit</button>
</form>
It is used to specify that the element should get focus when the page loads.
It supports only the following elements: <button>, <input>, <select> and <textarea>.
Only one form-associated element in a document can have this attribute specified. If there are several, the first element with the attribute set inserted, usually the first such element on the page, get the initial focus.
<elementName autofocus>
You can't apply autofocus on inputs of type "hidden", because hidden inputs can't be focused. Also, autofocus can only be on one element on one page. So don't use it on multiple elements.
codes:
<form style="margin-left:5vw;">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit">
</form>
The button autofocus attribute
HTML codes:
<p style="margin-left:5vw;">The button autofocus attribute</p>
<button style="margin-left:5vw;" type="button" autofocus onclick="alert('Hello world!')">click me!</button>
When present, the audio/video will automatically start playing as soon as it can do so without stopping.
The autoplay attribute can be used on the following elements:<audio >, <video>.
<element autoplay>
Click on the play button to play a sound:
codes:
<audio style="margin-left:5vw;" controls autoplay>
<source src="../pics/horse.wav" type="audio/wav">
<source src="../pics/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Click on the play button to play a video
codes:
<video style="margin-left:5vw;" width="400" height="200" controls autoplay>
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
</video>