HTML input elements are form elements such as text fields, checkboxes, and buttons. The name comes from the <input> tag, which is the mark-up that identifies web form components. The <input> tag relies upon a few attributes to classify and name each form item.
The type attribute determines what kind of input element to render to the screen. Options here include:
information item
text, checkbox, radio, password,
control item
button, submit, reset, and hidden form elements.
Each has its own unique functionality and customizable presentation.
<formg name="myWebForm" action="mailto:youremail@email.com" method="post"> Check Me: <input type="checkbox" /><br /> Name: <input type="text" /><br /> Yes: <input type="radio" /> No: <input type="radio" /><br /> <input type="submit" value="SUBMIT" /> <input type="reset" value="RESET" /> </form>
The value attribute plays a different role depending on the type of the input field. For example, when used with an HTML button, the value attribute defines the text inside of the button. When used with a text field, the value attribute populates the field with a default value.
<formg name="myWebForm" action="mailto:youremail@email.com" method="post"> Check Me: <input type="checkbox" /><br /> Name: <input type="text" value="David" /><br /> Yes: <input type="radio" /> No: <input type="radio" /><br /> <input type="submit" value="Send" /> <input type="reset" value="Clear" /> </form>
Check Me:
Name:
Yes: No:
Setting the name and id attributes inside of form elements is a good habit. The element name and/or id will later serve as the link between your HTML form and any server-side script that you may deploy later on to process that data. Perhaps the best approach is to use both attributes in your code, since varying scripting languages demand one identifying attribute over the other.
<formg name="myWebForm" action="mailto:youremail@email.com" method="post"> Check Me: <input name="" id="" type="checkbox" /><br /> Name: <input name="userName" id="userName" type="text" /><br /> Yes: <input name="radioItem" id="radioItem" type="radio" /> No: <input name="radioItem" id="radioItem" type="radio" /><br /> <input name="submitForm" id="submitForm" type="submit" value="SUBMIT" /> <input name="resetForm" id="resetForm" type="reset" value="RESET" /> </form>