example
Codes:
<img style="margin-left:5vw;" src="../pics/car2.jpg" alt="car" width="600" height="500"/>
revision:
The <i> tag - or idiomatic text element - defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc. Use this element only when there is not a more appropriate semantic element, (e.g. <em>, <strong>, <mark>, <cite>, <dfn>
The "lang" attribute must be used inside the <i> tag to define the language for the words from other languages.
Lorem ipsum is the most popular filler text in history.
code:
<p class="spec"><i>Lorem ipsum</i> is the most popular filler text
in history.</p>
The RMS Titanic, a luxury steamship, sank on April 15, 1912 after striking an iceberg.
code:
<p class="spec">The <i>RMS Titanic</i>, a luxury steamship, sank
on April 15, 1912 after striking an iceberg.</p>
I looked at it and thought This can't be real!
code:
<p class="spec">I looked at it and thought <i>This can't be real!</i></p>
Musa is one of two or three genera in the family Musaceae; it includes bananas and plantains.
code:
<p class="spec"><i class="latin">Musa</i> is one of two or three genera in
the family <i class="latin">Musaceae</i>; it includes bananas and plantains.</p>
The term bandwidth describes the measure of how much information can pass through a data connection in a given amount of time.
code:
<p class="spec">The term <i>bandwidth</i> describes the measure of how much
information can pass through a data connection in a given amount of time.</p>
hola is a Spanish word for Hello.
code:
<p class="spec"><i lang='es'>hola</i> is a Spanish word for Hello.</p>
The <iframe> tag specifies an inline frame that is used to embed another document within the current HTML document. It is a good practice to always include a "title attribute" for the <iframe>, which is used by screen readers to read out what the content of the <iframe> is. Use CSS to style the <iframe>.
allow : specifies a feature policy for the <iframe>.
allowfullscreen : value: true, false; set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method .
allowpaymentrequest : value: true, false; set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.
height : value: pixels; specifies the height of an <iframe>. Default height is 150 pixels.
loading : value: eager, lazy; specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met.
name : value: text; specifies the name of an <iframe>.
referrerpolicy : value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url; specifies which referrer information to send when fetching the iframe
sandbox : value: allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation; enables an extra set of restrictions for the content in an <iframe>.
src : value: URL; specifies the address of the document to embed in the <iframe>.
srcdoc : value: HTML code; specifies the HTML content of the page to show in the <iframe>.
width : value: pixels; specifies the width of an <iframe>. Default width is 300 pixels.
For examples, see: "HTML-09-iframe.html" under "tutorials" and "iframe.html" under "topics".
The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes: src - specifies the path to the image; alt - specifies an alternate text for the image, if the image for some reason cannot be displayed. Always specify the "width" and "height" of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: to link an image to another document, simply nest the <img> tag inside an <a> tag.
alt : value: text; specifies an alternate text for an image.
crossorigin : value: anonymous, use-credentials; allow images from third-party sites that allow cross-origin access to be used with canvas.
height : value: pixels; specifies the height of an image.
ismap : value: ismap; specifies an image as a server-side image map.
loading : value: eager, lazy; specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met.
longdesc : value: URL; specifies a URL to a detailed description of an image.
referrerpolicy : value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url; specifies which referrer information to use when fetching an image.
sizes : value : sizes; specifies image sizes for different page layouts.
src : value: URL; specifies the path to the image.
srcset : value: URL-list; specifies a list of image files to use in different situations.
usemap : value: #mapname; specifies an image as a client-side image map.
width : value: pixels; specifies the width of an image.
Codes:
<img style="margin-left:5vw;" src="../pics/car2.jpg" alt="car" width="600" height="500"/>
Codes:
<img style="margin-left:5vw;" src="../pics/smiley.png" alt="Smiley face" width="42" height="42" style="border:5px solid black">
The <input> tag is used within a "form" element to declare input controls that allow users to input data. An input field can be of various types depending upon the "type" attribute. The input tag is an empty element, which only contains attributes. For defining labels for the input element, the "label" tag can be used.
The different input types are as follows:
input type="button" : a push button with no default behavior displaying the value of the value attribute, empty by default.
input type="checkbox" : a check box allowing single values to be selected/deselected.
input type="color" : a control for specifying a color; opening a color picker when active in supporting browsers.
input type="date" : a control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.
input type="datetime-local" : a control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.
input type="email" : a field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
input type="file" : a control that lets the user select a file. Use the "accept attribute" to define the types of files that the control can select.
input type="hidden" : a control that is not displayed but whose value is submitted to the server.
input type="image" : a graphical submit button. Displays an image defined by the "src attribute". The "alt attribute" displays if the image src is missing.
input type="month" : a control for entering a month and year, with no time zone.
input type="number" : a control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads.
input type="password" : a single-line text field whose value is obscured. Will alert user if site is not secure.
input type="radio" : a radio button, allowing a single value to be selected out of multiple choices with the same name value.
input type="range" : a control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.
input type="reset" : a button that resets the contents of the form to default values. Not recommended.
input type="search" : a single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.
input type="submit" : a button that submits the form.
input type="tel" : a control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.
input type="text" (default value) : a single-line text field. Line-breaks are automatically removed from the input value.
input type="time" : a control for entering a time value with no time zone.
input type="url" : a field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
input type="week" : a control for entering a date consisting of a week-year number and a week number with no time zone.
Tip: always use the "label" tag to define labels for "input type="text"", "input type="checkbox"", "input type="radio"", "input type="file"", and "input type="password"".
type : used to specify the type of the <input> element. Its default value is "text".
value : specifies the value of the <input>element.
placeholder :specifies a hint that describes the expected value of an input field.
name : specifies the name of the <input>element.
alt : provides alternate text for the user, if they cannot view the image.
autofocus : specifies that an element should automatically get focus when the page loads.
checked : specifies that an element should be pre-selected (checked) when the page loads. The checked attribute can be used with <input type="checkbox">and <input type="radio">.
disabled : specifies that the element should be disabled. The disabled attribute can be set to keep a user from using the <input>element until some other condition has been met.
form : specifies one or more forms to which the <input>element belongs to.
max : specifies the maximum value for an <input>element.
required : specifies that an input field must be filled out before submitting the form.
readonly : specifies that an input field is read-only. A read-only input field cannot be modified. A form will still submit an input field that is readonly, but will not submit an input field that is disabled.
accept : specifies the types of files that the server accepts.
align : specifies the alignment of an image input.
autocomplete : specifies whether an <input>element should have autocomplete enabled.
dirname : specifies that the text direction will be submitted.
formaction : specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image").
formenctype : specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image").
formmethod : defines the HTTP method for sending data to the action URL (for type="submit" and type="image").
formnovalidate : defines that form elements should not be validated when submitted.
formtarget : specifies where to display the response that is received after submitting the form (for type="submit" and type="image").
height : specifies the height of an <input>element (only for type="image").
list : refers to a <datalist>element that contains pre-defined options for an <input>element.
maxlengt : specifies the maximum number of characters allowed in an <input>element.
min : specifies a minimum value for an <input>element.
multiple : specifies that a user can enter more than one value in an <input>element.
pattern : specifies a regular expression that an <input>element's value is checked against.
size : specifies the width, in characters, of an <input>element.
src : specifies the URL of the image to use as a submit button (only for type="image").
step : specifies the legal number intervals for an input field.
width : specifies the width of an <input>element (only for type="image")
The <input type="button">defines a clickable button (mostly used with a JavaScript to activate a script). Its value attribute contains a DOMString that is used as the button's label.
code:
<input class="example" type="button" value="Click Me"> with value
<input class="example" type="button"> no value specified
the button below activates a JavaScript when it is clicked.
code:
<div>
<p id="one" class="example"></p>
<form class="example">
<input type="button" value="Click me" onclick="msg()">
</form>
</div>
<script>
function msg() {
document.getElementById('one').innerHTML = "Hello world!";
}
</script>
button with a click event handler.
The machine is stopped.
code:
<div>
<form class="example">
<input class="example"type="button" value="Start machine" id="three">
</form>
<p id="two" class="example">The machine is stopped.</p>
</div>
<script>
const button = document.querySelector('#three');
const paragraph = document.querySelector('#two');
button.addEventListener('click', updateButton);
function updateButton() {
if (button.value === 'Start machine') {
button.value = 'Stop machine';
paragraph.textContent = 'The machine has started!';
} else {
button.value = 'Start machine';
paragraph.textContent = 'The machine is stopped.';
}
}
</script>
The <input type="checkbox">defines a checkbox, which is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: always add the <label>tag for best accessibility practices!
select one or more options (via text or box)!
code:
<form class="example" action="#">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
select one or more options (via box only)!
code:
<form class="example" action="#">
<p class="spec"> Interests:<br>
<input type="checkbox" name="cb-cars" value="likes">Cars<br>
<input type="checkbox" name="cb-sports" value="likes"> Sports<br>
<input type="checkbox" name="cb-videogames" value="likes"> Videogames
</p>
<p class="spec"><input type="submit" value="Send data"></p>
</form>
The <input type="color">defines a color picker. The default value is #000000 (black). The value must be in seven-character hexadecimal notation. Tip: always add the <label>tag for best accessibility practices!
type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).
show a color picker
code:
<form class="spec" action="#">
<label style="margin-left: 4vw;" for="favcolor">Select your favorite color</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br>
<input class="example" type="submit">
</form>
select a color
Choose your monster's colors:
code:
<div>
<p>Choose your monster's colors:</p>
<div class="example">
<input type="color" id="head" name="head" value="#e66465">
<label for="head">Head</label>
</div>
<div class="example">
<input type="color" id="body" name="body" value="#f6b73c">
<label for="body">Body</label>
</div>
</div>
The <input type="date">defines a date picker. The resulting value includes the year, month, and day. Tip: always add the <label>tag for best accessibility practices!
type="date" is not supported in Safari or Internet Explorer 11 (or earlier).
show a date control.
code:
<form action="#">
<label style="margin-left: 4vw;" for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit">
</form>
choose a party date.
code:
<form>
<label style="margin-left: 4vw;" for="party">Choose your preferred party date:
<input type="date" name="party" min="2021-03-01" max="2021-05-30">
</label>
</form>
The <input type="datetime-local">defines a date picker. The resulting value includes the year, month, day, and time. Tip: always add the <label>tag for best accessibility practices!
type="datetime-local" is not supported in Firefox, Safari or Internet Explorer 12 (or earlier).
show a date and time control.
code:
<form action="#">
<label style="margin-left: 4vw;" for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit">
</form>
show a date and time for your appointment.
code:
<div>
<label style="margin-left: 4vw;" for="meeting-time">Choose a time for your appointment:</label>
<input type="datetime-local" id="meeting-time" name="meeting-time"
value="2021-03-09T16:30" min="2021-03-09T00:00" max="2021-03-14T00:00">
</div>
The <input type="email">defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address. To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute. Tip: Always add the <label>tag for best accessibility practices!
Show an email field (allows only one email address):
code:
<form action="#">
<label style="margin-left: 5vw;" for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
show an email field (allows multiple email addresses). Separate each email address with a comma:
code:
<form action="/action_page.php" style="margin-left: 5vw;">
<label style="margin-left: 5vw;" for="emails">Enter email addresses:</label>
<input type="email" id="emails" name="emails" multiple>
<input type="submit">
</form>
The <input type="file">defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: always add the <label>tag for best accessibility practices!
select files
Show a file-select field which allows only one file to be chosen:
code:
<form action="#" style="margin-left:5vw;">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input class="example" type="submit">
</form>
show a file-select field which allows multiple files:
code:
<form action="#" style="margin-left:5vw;">
<label for="myfile">Select files:</label>
<input type="file" id="myfile" name="myfile" multiple><br><br>
<input class="example" type="submit">
</form>
The <input type="hidden">defines a hidden input field. A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores database records that need to be updated when the form is submitted.
Note: while the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security! The hidden field is not shown to the user, but the data is sent when the form is submitted.
code:
<form action="#">
<label style="margin-left: 4vw;" for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input class="example" type="submit" value="Submit">
</form>
The <input type="image">defines an image as a submit button.The path to the image is specified in the src attribute.
image as submit button
code:
<form action="#">
<label style="margin-left: 4vw;" for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label style="margin-left: 4vw;"for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input class="example" style="margin-left: 4vw;" type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
sign in to your account:
code:
<div>
<div>
<label style="margin-left: 4vw;" for="userId">User ID</label>
<input type="text" id="userId" name="userId">
</div>
<input style="margin-left: 4vw;" class="example" type="image" id="image" alt="Login" src="../pics/login-button.png" width="5%">
</div>
The <input type="number">defines a field for entering a number. Use the following attributes to specify restrictions:
max - specifies the maximum value allowed;
min - specifies the minimum value allowed;
step - specifies the legal number intervals;
value - specifies the default value.
Tip: always add the <label>tag for best accessibility practices!
display a number field
code:
<form action="#">
<label style="margin-left: 4vw;" for="quantity">quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="submit">
</form>
how many tentacles
code:
<div class="spec">
<label style="margin-left: 4vw;" for="tentacles">Number of tentacles (10-100):</label>
<input type="number" id="tentacles" name="tentacles" min="10" max="100">
</div>
The <input type="month">defines a month and year control. The format is "YYYY-MM".
Tip: always add the <label>tag for best accessibility practices!
type="month" is not supported in Firefox, Safari or Internet Explorer 11 and earlier versions.
display a month input control
code:
<form action="#">
<label style="margin-left: 4vw;" for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit">
</form>
start month
code:
<div>
<label style="margin-left: 4vw;" for="start">Start month:</label>
<input type="month" id="start" name="start" min="2021-03" value="2021-06">
</div>
The <input type="password">defines a password field (characters are masked).
Note: Any forms involving sensitive information like passwords should be served over HTTPS.
Tip: always add the <label>tag for best accessibility practices!
define a password field (characters are masked)
code:
<form action="#">
<label style="margin-left: 4vw;" for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label style="margin-left: 4vw;" for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8"><br><br>
<input class="example" type="submit">
</form>
sign in with username and pasword
code:
<div>
<div>
<label style="margin-left: 4vw;" for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label style="margin-left: 4vw;" for="pass">Password (8 characters minimum):</label>
<input type="password" id="pass" name="password" minlength="8" required>
</div>
<input class="example" type="submit" value="Sign in">
</div>
The <input type="radio">defines a radio button. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. The radio group must share the same name (the value of the "name attribute") to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.
The "value attribute" defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button was selected.
Tip: always add the <label>tag for best accessibility practices!
display radio buttons
code:
<div class="spec">
<form action="#" class="spec" style="margin-left: 5vw;">
<p class="spec">Please select your gender:</p>
<input class="example" type="radio" id="male" name="gender" value="male">
<label style="margin-left: 4vw;" for="male">Male</label><br>
<input class="example" type="radio" id="female" name="gender" value="female">
<label style="margin-left: 4vw;" for="female">Female</label><br>
<input class="example" type="radio" id="other" name="gender" value="other">
<label style="margin-left: 4vw;" for="other">Other</label>
<br>
<p class="spec">Please select your age:</p>
<input class="example" type="radio" id="age1" name="age" value="30">
<label style="margin-left: 4vw;" for="age1">0 - 30</label><br>
<input class="example" type="radio" id="age2" name="age" value="60">
<label style="margin-left: 4vw;" for="age2">31 - 60</label><br>
<input class="example" type="radio" id="age3" name="age" value="100">
<label style="margin-left: 4vw;" for="age3">61 - 100</label><br><br>
<input class="example" type="submit" value="Submit">
</form>
</div>
select a maintenance drone
code:
<div>
<div style="margin-left: 5vw;">
<input class="example" type="radio" id="huey" name="drone" value="huey" checked>
<label style="margin-left: 4vw;" for="huey">Huey</label>
</div>
<div style="margin-left: 5vw;">
<input class="example" type="radio" id="dewey" name="drone" value="dewey">
<label style="margin-left: 4vw;" for="dewey">Dewey</label>
</div>
<div style="margin-left: 5vw;">
<input class="example" type="radio" id="louie" name="drone" value="louie">
<label style="margin-left: 4vw;" for="louie">Louie</label>
</div>
</div>
The <input type="range">defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the follwing attributes:
max - specifies the maximum value allowed;
min - specifies the minimum value allowed;
step - specifies the legal number intervals;
value - specifies the default value.
Tip: always add the <label>tag for best accessibility practices!
display a range field
code:
<form action="#">
<label style="margin-left: 4vw;" for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit">
</form>
audio settings
code:
<div class="spec">
<div class="example">
<input type="range" id="volume" name="volume" min="0" max="11">
<label style="margin-left: 4vw;" for="volume">Volume</label>
</div>
<div class="example">
<input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10">
<label style="margin-left: 4vw;" for="cowbell">Cowbell</label>
</div>
</div>
The <input type="reset">defines a reset button which resets all form values to its initial values.
Tip: avoid reset buttons in your forms! It is frustrating for users if they click them by mistake.
define a reset button
code:
<form action="#">
<label style="margin-left: 4vw;" for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<label style="margin-left: 4vw;" for="pin">Enter a PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4"><br><br>
<input class="example" type="reset" value="Reset">
<input class="example" type="submit" value="Submit">
</form>
reset button for password
code:
<form class="example" action="#">
<input type="password" name="password" id="password" maxlength="6">
<label for="password"> Type a password here</label> <br>
<input class="example" type="reset" value="Reset">
</form>
The <input type="search">defines a text field for entering a search string.
Note: remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.
Tip: always add the <label>tag for best accessibility practices!
display a search field
code:
<form action="#">
<label style="margin-left: 4vw;" for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit">
</form>
search the site
code:
<div>
<label style="margin-left: 4vw;" for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" aria-label="Search through site content">
<button>Search</button>
</div>
The <input type="submit">defines a submit button which submits all form values to a form-handler. The form-handler is typically a server page with a script for processing the input data. The form-handler is specified in the form's action attribute.
define a submit button
code:
<form action="#">
<label style="margin-left: 4vw;" for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label style="margin-left: 4vw;" for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input class="example" type="submit" value="Submit">
</form>
submit some text
code:
<form>
<div>
<label style="margin-left: 4vw;" for="example">Let's submit some text</label>
<input id="example" type="text" name="text">
</div>
<div>
<input class="example" type="submit" value="Send">
</div>
</form>
The <input type="tel">defines a field for entering a telephone number. Browsers that do not support "tel" fall back to being a standard "text" input.
Tip: always add the <label>tag for best accessibility practices!
display a telephone input field
code:
<form action="#" style="margin-left: 4vw;">
<label style="margin-left: 4vw;" for="phone">Enter a phone number:</label> <br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
<small style="margin-left: 4vw;">Format: 123-45-678</small><br><br>
<input type="submit">
</form>
suggested numbers
code:
<div class="spec">
<label style="margin-left: 4vw;" for="telNo">Phone number:</label>
<input id="telNo" name="telNo" type="tel" list="defaultTels">
<datalist id="defaultTels">
<option value="111-1111-1111">
<option value="122-2222-2222">
<option value="333-3333-3333">
<option value="344-4444-4444">
</datalist>
</div>
The <input type="text">defines a single-line text field. The default width of the text field is 20 characters.
Tip: always add the <label>tag for best accessibility practices!
display text input fields
Click on the submit button to submit the form.
code:
<div class="spec">
<form action="#">
<label style="margin-left: 4vw;" for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label style="margin-left: 4vw;" for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input class="example" type="submit" value="Submit">
</form>
<p class='spec' style="margin-left: 5vw;">Click on the submit button to submit the form.</p>
</div>
choose a username
code:
<form>
<div>
<label style="margin-left: 4vw;" for="uname">Choose a username: </label>
<input type="text" id="uname" name="name">
</div>
<div>
<button style="margin-left: 4vw;">Submit</button>
</div>
</form>
The <input type="time">defines a control for entering a time (no time zone).
Tip: always add the <label>tag for best accessibility practices!
show a time input control
If the browser supports it, a time picker pops up when entering the input field.
code:
<div class="spec">
<p class='spec' style="margin-left: 5vw;">If the browser supports it, a time picker pops up when entering the input field.</p>
<form action="#">
<label style="margin-left: 4vw;" for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit">
</form>
</div>
basic use of "time"
<form>
<label style="margin-left: 4vw;" for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time">
</form>
The <input type="url">defines a field for entering a URL. The input value is automatically validated before the form can be submitted.
Tip: always add the <label>tag for best accessibility practices!
display a URL input field
code:
<form action="#">
<label style="margin-left: 4vw;" for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"><br><br>
<input class="example" type="submit">
</form>
suggested urls
code:
<div class="spec">
<input id="myURL" name="myURL" type="url" list="defaultURLs" style="margin-left: 4vw;" >
<datalist id="defaultURLs">
<option value="https://developer.mozilla.org/">
<option value="http://www.google.com/">
<option value="http://www.microsoft.com/">
<option value="https://www.mozilla.org/">
<option value="http://w3.org/">
</datalist>
</div>
The <input type="week">defines a week and year control (no time zone).
Tip: always add the <label>tag for best accessibility practices!
display a week input control
code:
<form action="#">
<label style="margin-left: 4vw;" for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit">
</form>
choose a week
code:
<div>
<label style="margin-left: 4vw;" for="week">Choose a week in May or June:</label>
<input type="week" name="week" id="camp-week" min="2021-W18" max="2021-W26" required>
</div>
| Member Name | |
| Mobile | |
| Birth Date | |
| Gender | |
| Married |
Yes No |
| Member Name -----> | |
| Mobile -----> | |
| Birth Date -----> |
|
| Gender -----> | |
| Married Status -----> |
code:
<div class="spec">
<table>
<tr>
<td>Member Name</td>
<td><input id="txtName" type="text" /></td>
</tr>
<tr>
<td>Mobile</td>
<td><input id="txtMobile" type="text" /></td>
</tr>
<tr>
<td>Birth Date</td>
<td><input id="txtBirthDate" type="text" /></td>
</tr>
<tr><td>Gender</td>
<td><select id="gender">
<option>male</option>
<option>female</option>
</select>
</td>
</tr>
<tr>
<td>Married</td>
<td>
<input type="radio" name="marry" value="Yes Married">Yes<br>
<input type="radio" name="marry" value="Not Married" checked>No<br>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="clickbtn" value="Submit" onClick="CalcAdd()"
style="font-size:19px;" />
</td>
</tr>
</table>
<table id="tbl" >
<tr><td><i> Member Name -----></i></td>
<td><p class="spec" id="pMemberName"></p></td>
</tr>
<tr><td><i>Mobile -----></i></td>
<td><p class="spec" id="pMemberMobile"></p></td>
</tr>
<tr>
<td><i>Birth Date -----></i></td>
<td><p class="spec" id="pMemberBirthDate" > </p></td>
</tr>
<tr>
<td><i>Gender -----></i></td>
<td><p class="spec" id="pMemberGender"></p></td>
</tr>
<tr>
<td><i>Married Status -----></i></td>
<td><p class="spec" id="pMemberMarried"></p></td>
</tr>
</table>
</div>
<script type="text/JavaScript">
function CalcAdd() {
//to set the DIV tag contents
document.getElementById("pMemberName").innerText =
document.getElementById("txtName").value;
document.getElementById("pMemberMobile").innerText =
document.getElementById("txtMobile").value;
document.getElementById("pMemberBirthDate").innerText =
document.getElementById("txtBirthDate").value;
document.getElementById("pMemberGender").innerText =
document.getElementById("gender").options[document.getElementById("gender").
selectedIndex].text;
document.getElementById("pMemberMarried").innerText =
document.querySelector('input[name = marry]:checked').value;
}
</script>
code:
<div class="spec">
<p class='spec' id="po"></p>
<form class="" action="index.html" method="post">
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<input type="text" name="array[]" value="" /><br>
<button type="button" name="button" onclick="send()">
Submit
</button>
</form>
<p class="spec" id="par"></p>
</div>
<script type="text/javascript">
var l = "The respective values are :";
function send() {
var input = document.getElementsByName('array[]');
for (var i = 0; i < input.length; i++) {
var a = input[i];
l = l + "array[" + i + "].value= " + a.value + " ";
}
document.getElementById("par").innerHTML = l;
document.getElementById("po").innerHTML = "Output";
}
</script>
code:
<form name="calculator">
<table>
<tr><td>Initial deposit</td>
<td><input name="money" type="number" value="10000" required></td>
</tr>
<tr><td>How many months?</td>
<td><select name="months">
<option value="3">3 (minimum)</option>
<option value="6">6 (half-year)</option>
<option value="12" selected>12 (one year)</option>
<option value="18">18 (1.5 years)</option>
<option value="24">24 (2 years)</option>
<option value="30">30 (2.5 years)</option>
<option value="36">36 (3 years)</option>
<option value="60">60 (5 years)</option>
</select>
</td>
</tr>
<tr><td>Interest per year?</td>
<td><input name="interest" type="number" value="5" required></td>
</tr>
</table>
<table id="diagram">
<tr><th>was:</th>
<th>becomes:</th>
</tr>
<tr><th id="money-before"></th>
<th id="money-after"></th>
</tr>
<td><div style="background: red;width:40px;height:100px"></div></td>
<td><div style="background: green;width:40px;height:0" id="height-after"></div></td>
</table>
<script>
let form = document.forms.calculator;
form.money.oninput = calculate;
form.months.onchange = calculate;
form.interest.oninput = calculate;
function calculate() {
let initial = +form.money.value;
if (!initial) return;
let interest = form.interest.value * 0.01;
if (!interest) return;
let years = form.months.value / 12;
if (!years) return;
let result = Math.round(initial * (1 + interest * years));
let height = result / form.money.value * 100 + 'px';
document.getElementById('height-after').style.height = height;
document.getElementById('money-before').innerHTML = form.money.value;
document.getElementById('money-after').innerHTML = result;
}
calculate();
</script>
</form>
code:
<div id=colormsg">
<select class="example" id="colorPicker" onchange="JavaScript:changeColor()">
<option value="transparent">none</option>
<option value="yellow">yellow</option>
<option value="seagreen">seagreen</option>
<option value="salmon">salmon</option>
<option value="lightblue">light blue</option>
<option value="limegreen">lime green</option>
<option value="brown">brown</option>
<option value="burlywood">burlywood</option>
</select>
</div>
<style>
#colorPicker{width: 10vw; height: 3vw; font-size:1.1vw; background-color: lightgreen;}
</style>
<script>
function changeColor(){
var newColor = document.getElementById('colorPicker').value;
document.getElementById('colorMsg').style.background = newColor;
}
</script>
The <ins> tag defines a text that has been inserted into a document. Browsers will usually underline inserted text.
There are two attributes that can be used to provide additional information about the reason a change was made to a document:
cite ; value: URL; specifies a URL to a document that explains the reason why the text was inserted/changed
datetime ; value: YYYY-MM-DDThh:mm:ssTZD; specifies the date and time of when the text was inserted/changed
My favorite color is blue red!
Codes:
<p class="spec">My favorite color is <del>blue</del> <ins>red</ins>!</p>
“You're late!”
“I apologize for the delay.”
“A wizard is never late …”
Codes:
<p class="spec">“You're late!”</p>
<del>
<p class="spec">“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
<p class="spec">“A wizard is never late …”</p>
</ins>