Explain the different input types provided in forms.

1.	Explain the different input types provided in forms.
Answer» <input> tag is the tag which creates fields inside the <form> tag for the website VISITOR to enter his/her information accordingly. There are different types of input available to the developer to use, to get the user input. As per standard practice the <input> tags, should have a <label> tag. And the for attribute in a label should match the id attribute in the input. So, the different types are - <input type=“text”> - The most common of the types, which produces a simple text box in which the user can type anything - numbers, alphabets. <input type=“radio”> - The input element of type radio are mostly used in groups. Only one radio button from the group is selected at a time. They are by default rendered as a small circle, which are filled once selected. <input type=“checkbox”> - The input element of type checkbox, are mostly are by default rendered as square boxes. We can select all of them or some of them. <input type=“password”> - The input element of type password, is used to enter secure text. It is basically like a type text, but whatever you enter will be marked by an asterisk(“”). <input type=“file”>* - The input element with type=“file”, let the user choose one or more file from their computer. These files can then be uploaded to a server when we submit the form. <input type=“hidden”> - The input element with type=“hidden”, is basically used by the WEB developer. It is MAINLY used to pass some security token when submitting the form. <input type=“image”> - The input element with type=“image”, is used to create a graphical submit button. It is to be noted that you should have an image of a button, for this to work. <input type=“button”> - The input element with type=“button”, is a plain button which we have to program to do something. <input type=“reset”> - The input element with type=“reset”, are rendered as button. On clicking this type of button, it will remove all the data, which we have entered in our form. <input type=“submit”> - The input element with type=“submit”, are rendered as a button. On click of these type of button, it will take are entered value in the form and will try to submit to the server. We will use all of these above types to create our example. <!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; } input[type='image'] { width: 120px; } input[type='reset'], input[type='button'] { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: lightskyblue; cursor: pointer; } .styled { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(220, 0, 0, 1); cursor: pointer; } .styled:hover { background-color: rgba(255, 0, 0, 1); } #button_eg{ display: flex; justify-content: center; align-items: center; } </style> </head> <body> <form> <h1>Input Type Demo</h1> <div id="text_eg"> <label for="name">Enter Name ( 4 to 12 characters ) :</label> <input type="text" id="name" name="name" required MINLENGTH="4" MAXLENGTH="12" size="20"> </div> <div id="password_eg"> <label for="pass">Password (8 characters minimum):</label> <input type="password" id="pass" name="password" minlength="8" required> </div> <div id="img_eg"> <label for="avatar">Choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <div id="radio_eg"> <label>Gender:</label> <div> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label> </div> <div> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <div> <input type="radio" id="unknown" name="gender" value="unknown"> <label for="unknown">Not Specified</label> </div> </div> <div id="checkbox_eg"> <label>Choose your hobbies:</label> <div> <input type="checkbox" id="code" name="code" checked> <label for="code">Coding</label> </div> <div> <input type="checkbox" id="travel" name="travel"> <label for="travel">Travelling</label> </div> <div> <input type="checkbox" id="movies" name="movies"> <label for="movies">Movies</label> </div> </div> <div id="hidden_eg"> <input id="prodId" name="prodId" type="hidden" value="xm234jq"> </div> <div id="button_eg"> <input type="image" id="image" alt="Login" src="login-button.png"> <input type="button" value="Click Me"> <input type="reset" value="Reset"> <input class="styled" type="submit" value="Send Request"> </div> </form> </body> </html>

Answer»

<input> tag is the tag which creates fields inside the <form> tag for the website VISITOR to enter his/her information accordingly. There are different types of input available to the developer to use, to get the user input.

As per standard practice the <input> tags, should have a <label> tag. And the for attribute in a label should match the id attribute in the input.

So, the different types are -

<input type=“text”> - The most common of the types, which produces a simple text box in which the user can type anything - numbers, alphabets.
<input type=“radio”> - The input element of type radio are mostly used in groups. Only one radio button from the group is selected at a time. They are by default rendered as a small circle, which are filled once selected.
<input type=“checkbox”> - The input element of type checkbox, are mostly are by default rendered as square boxes. We can select all of them or some of them.
<input type=“password”> - The input element of type password, is used to enter secure text. It is basically like a type text, but whatever you enter will be marked by an asterisk(“*”).
<input type=“file”> - The input element with type=“file”, let the user choose one or more file from their computer. These files can then be uploaded to a server when we submit the form.
<input type=“hidden”> - The input element with type=“hidden”, is basically used by the WEB developer. It is MAINLY used to pass some security token when submitting the form.
<input type=“image”> - The input element with type=“image”, is used to create a graphical submit button. It is to be noted that you should have an image of a button, for this to work.
<input type=“button”> - The input element with type=“button”, is a plain button which we have to program to do something.
<input type=“reset”> - The input element with type=“reset”, are rendered as button. On clicking this type of button, it will remove all the data, which we have entered in our form.
<input type=“submit”> - The input element with type=“submit”, are rendered as a button. On click of these type of button, it will take are entered value in the form and will try to submit to the server.

We will use all of these above types to create our example.

<!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; } input[type='image'] { width: 120px; } input[type='reset'], input[type='button'] { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: lightskyblue; cursor: pointer; } .styled { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(220, 0, 0, 1); cursor: pointer; } .styled:hover { background-color: rgba(255, 0, 0, 1); } #button_eg{ display: flex; justify-content: center; align-items: center; } </style> </head> <body> <form> <h1>Input Type Demo</h1> <div id="text_eg"> <label for="name">Enter Name ( 4 to 12 characters ) :</label> <input type="text" id="name" name="name" required MINLENGTH="4" MAXLENGTH="12" size="20"> </div> <div id="password_eg"> <label for="pass">Password (8 characters minimum):</label> <input type="password" id="pass" name="password" minlength="8" required> </div> <div id="img_eg"> <label for="avatar">Choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <div id="radio_eg"> <label>Gender:</label> <div> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label> </div> <div> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <div> <input type="radio" id="unknown" name="gender" value="unknown"> <label for="unknown">Not Specified</label> </div> </div> <div id="checkbox_eg"> <label>Choose your hobbies:</label> <div> <input type="checkbox" id="code" name="code" checked> <label for="code">Coding</label> </div> <div> <input type="checkbox" id="travel" name="travel"> <label for="travel">Travelling</label> </div> <div> <input type="checkbox" id="movies" name="movies"> <label for="movies">Movies</label> </div> </div> <div id="hidden_eg"> <input id="prodId" name="prodId" type="hidden" value="xm234jq"> </div> <div id="button_eg"> <input type="image" id="image" alt="Login" src="login-button.png"> <input type="button" value="Click Me"> <input type="reset" value="Reset"> <input class="styled" type="submit" value="Send Request"> </div> </form> </body> </html>

Explain the different input types provided in forms.

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment