1.

Explain the new form elements of <datalist> and <output>.

Answer»
  • <datalist> tag is like the dropdown tag of <select>. It contains a set of <option> tag inside it to REPRESS the value. It is a bit different in representation from the Dropdown. It is like a plain text box. Once you click inside the text box, it will show the complete list. Or if you type it will show the filtered list.
  • <output> tag represents the RESULT of some operation, performed by our form.

In our example, the <datalist> tag operation is straightforward as, it is used to select a list of browsers. Then there is a <input type=“range”> slider in our code. Once we slide it the value of it is processed and shown in our <output> tag.

<!DOCTYPE html> <html> <head>    <META charset="utf-8" />    <title>Datalist and output</title>    <style>        form{            display: grid;            place-content: center;            grid-gap: 10px;            border: 1px solid black;        }        label {            font-family: "FIRA Sans", sans-serif;        }    </style> </head> <body>    <form oninput="ratings.value = parseInt(z1.value)">    <h1>Datalist & Output Demo</h1>        <div>            <label for="myBrowser">Choose a browser from this list:</label>            <input list="browsers" id="myBrowser" NAME="myBrowser" />            <datalist id="browsers">                <option value="Chrome">                <option value="Firefox">                <option value="Internet Explorer">                <option value="Opera">                <option value="Safari">                <option value="Microsoft Edge">            </datalist>        </div>        <div>            <label for="browserRating">Give a Rating for your browser:</label>            <input id="browserRating" type="range" name="z1" value="0" />        </div>        <div>            <label for="myRatings">My Ratings:</label>            <output id="myRatings" name="ratings"></output>        </div>    </form> </body> </html>

Selecting the <datalist> On changing the rating


Discussion

No Comment Found

Related InterviewSolutions