1.

HTML Elements: Forms

Answer»

  • <form>...</form>: A document section with interactive controls for submitting information to a web server is represented by the HTML <form> element. An example which shows the usage of the <form> element is given below:
<form action="" method="get" class="demoForm">
<div class="demoForm">
<label for="name">Please input your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="demoForm">
<label for="email">Please input your email id: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="demoForm">
<input type="submit" value="Submit!">
</div>
</form>

  • <button>...</button>: The HTML <button> element specifies a clickable button that can be used in forms or anywhere else in a document where a conventional button is required. An example which shows the usage of the <button> element is given below:
<!DOCTYPE html>
<html>
<body>
<p>Example of a button</p>
<button type="button" onclick="alert(This is a button click!')">Click Me!</button>
</body>
</html>

  • <datalist>...</datalist>: The HTML <datalist> element includes a series of <option> components that indicate the values that can be used for other controls.
<!DOCTYPE html>
<html>
<body>
<p>Demo of the datalist tag in HTML</p>
<form action="" method="get">
<label for="browser">Choose your favourite fruit from the list given below:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="browsers">
<option value="Apple">
<option value="Orange">
<option value="Kiwi">
<option value="Pomegranate">
<option value="Dragon Fruit">
</datalist>
<input type="submit">
</form>
</body>
</html>


  • <input>: The HTML <input> element is used to create interactive controls for web based forms in order to accept data from the user; depending on the device and user, a range of sorts of input data and control widgets are accessible. Examples of the usage of the input element have been given above.


  • <progress>...</progress>: The HTML <progress> element shows a progress indicator for an activity, which is commonly shown as a progress bar. An example which shows the usage of the <progress> element is given below:

<!DOCTYPE html>
<html>
<body>
<p>Demo of the progress tag</p>
<label for="fileDownload">Progress of the download:</label>
<progress id="fileDownload" value="64" max="80"> 64% </progress>
</body>
</html>


  • <select>...</select>: The HTML <select> element denotes a control with a menu of options.


  • <optgroup>...</optgroup>: Within a <select> element, the HTML optgroup> element generates a grouping of alternatives.


  • <option>...</option>: An item contained in a <select>, an <optgroup>, or an <datalist> is defined by the HTML <option> element. As a result, option> can be used to represent popup menu items and other lists of things in an HTML text. An example which shows the usage of the <select>, <optgroup>, <option> elements is given below:

<label for="cuisine">Select your favourite cuisine:</label>
<select name="cuisine" id="cuisine">
<optgroup label="Indian Cuisine">
<option value="chola-bhature">Chola Bhature</option>
<option value="dahi-vada">Dahi Vada</option>
</optgroup>
<optgroup label="Italian Cuisine">
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
</optgroup>
</select>


  • <label>...</label>: A caption for an item in a user interface is represented by the HTML <label> element. Examples of the usage of a label element have been given above.


  • <legend>...</legend>: The caption for the content of its parent <fieldset> is represented by the HTML <legend> element.


  • <fieldset>...</fieldset>: Within a web form, the HTML <fieldset> element is used to organise many controls as well as labels (<label>). An example which shows the usage of the <legend> and <fieldset> elements is given below:

<!DOCTYPE html>
<html>
<body>
<p>Demo of the legend and fieldset elements</p>
<form action="">
<fieldset>
<legend>Personal Information:</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname">
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname">
<label for="emailId">Email Id:</label>
<input type="emailId" id="emailId" name="emailId">
<label for="birthday">Date of birth:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

  • <textarea>...</textarea>: When you wish to allow users to submit a large quantity of free-form text, such as a comment on a review or feedback form, the HTML <textarea> element indicates a multi-line plain-text editing control. An example which shows the usage of the <textarea> element is given below:
<textarea id="interviewbitReview" name="interviewbitReview" rows="2" cols="33">
At interviewbit.com we can learn how to prepare for coding interviews as it offers free tutorials in all Computer Science subjects.
</textarea>


Discussion

No Comment Found

Related InterviewSolutions