revision:
The max attribute can be used on the following elements:<input>, <meter>, <progress>.
When used by the <progress> element, the max attribute specifies how much work the task requires in total.
<input max="number">
<meter max="number"></element>
<progress max="number"></element>
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<input type="submit">
</form>
codes:
<label style="margin-left:3vw;" for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
The maxlength attribute can be used on the following elements: <input> and <textarea>.
With respect to <input>, the attribute can be used on elements that accept string type value.
<textarea maxlength="number"></textarea>
<input maxlength="number"/>
number: it is the maximum number of characters allowed in an element. Its default value is 524288
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="10"><br><br>
<input type="submit" value="Submit">
</form>
codes:
<textarea style="margin-left:3vw;" rows="4" cols="50" maxlength="50">
Enter text here...</textarea>
It specifies what media/device the linked document is optimized for. This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media. This attribute can accept several values.
The media attribute can be used on the following elements: <a>, <area>, <link>, <source>, <style>.
<a media="value"> : only used if the "href attribute" is present. this attribute is purely advisory.
<area media="value"></a> : only used if the href attribute is present. This attribute is purely advisory.
<link media="value">
<source media="media_query">
<style media="value"></a>
codes:
<a href="https://lwitters.com" media="print and (resolution:300dpi)">
Click to open in the same tab
</a>
<br>
<a href="https://lwitters.com" target="_blank" media="print and (resolution:300dpi)">
Click to open in a different tab
</a>
The form-data is sent to the page specified in the action attribute. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
The method attribute can be used on the <form> element.
<form method="get | post"></form>
get: default; appends the form-data to the URL in name/value pairs: URL?name=value&name=value.
In the "get/GET" method, after the submission of the form, the form values will be visible in the address bar of the new browser tab. It has a limited size of about 3000 characters. It is only useful for non-secure data, not for sensitive information.
post: sends the form-data as an HTTP post transaction.
In the "post/POST" method, after the submission of the form, the form values will not be visible in the address bar of the new browser tab as it was visible in the GET method. It appends form data inside the body of the HTTP request. It has no size limitation. This method does not support bookmark the result.
codes:
<form style="margin-left:3vw;" action="/action_page.php" method="get" target="_blank">
<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>
<input type="submit" value="Submit">
</form>
codes:
<form style="margin-left:3vw;" action="# id="users" action="#" method="GET" target="_blank">
<p class="spec">User_id:
<input type="email" name="email" placeholder="Emter Email Id"></p>
<p class="spec">Password:
<input type="password" name="pword" placeholder="Enter Password"></p>
<input style="margin-left:3vw;" type="submit" value="Submit normally">
<input type="submit" formaction="#" value="submit using POST method" formmethod="post">
</form>
The min attribute can be used on the following elements : <input> and <meter>.
When used together with the <meter> element, the "min attribute" specifies the lower bound of the gauge. The value must be less than or equal to the value of the "max attribute". If a value is specified for the "min attribute" that isn't a valid number, the input has no minimum value.
<input min=" ">
<meter min=" "></meter>
Valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and the <meter> element, the min attribute is a number that specifies the most negative value a form control considers to be valid.
codes:
<form style="margin-left:5vw;" action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<input type="submit">
</form>
codes:
<p class="spec"><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
<p class="spec"><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
<p class="spec"><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
When present, it specifies that the user is allowed to enter more than one value in the <input> and <select> element. Valid for the "email" and "file" input types and the <select> element, the manner by which the user opts for multiple values depends on the form control.
<input multiple>
<select multiple></select>
For <input type="file">: to select multiple files, hold down the CTRL or SHIFT key while selecting.
For <input type="email">: separate each email with a comma - like: mail@example.com, mail2@example.com, mail3@example.com - in the email field.
Try selecting more than one file when browsing for files.
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple><br><br>
<input type="submit">
</form>
Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
When present, it specifies that the audio output of the video should be muted.
The muted attribute can be used on the following elements: <video> and <audio>
<video muted></video>
<audio muted></video>
To get sound back, click the mute button (to unmute), or remove the muted attribute.
codes:
<video style="margin-left: 3vw;" width="320" height="240" controls muted>
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
codes:
<audio style="margin-left: 3vw;"" controls muted>
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>