User input has many uses, such as restricting access with a login page or updating one's profile. This input often takes the form of the <input> element. <input> is self-closing tag. The power of input is in its attributes. Though set to 'text' by default, the type="" attribute defines what type of user input we want. This attibute can have any of a dosen values, including 'text', a simple text input field, 'password', a text field that displays dots in place of characters, 'email', a text field that accepts an email address, 'radio', a one-of-many choice among a set of buttons, 'checkbox', a some-of-many choice, 'button', a simple button to press, 'file', which allows the user to select a file from their computer, 'submit', a button that submits the form containing the element, and 'hidden', which is a hidden text area often used to preserve data from another location (like PHP) in the form's data. There are many other possible values for the type="" attribute. The value="" attribute defines the element's initial value.
Some examples:
<input>
<input type="password">
<input type="file">
<input type="button" value="Press Me!">
<input type="radio" value="#1"><br>
<input type="radio" value="#2"><br>
<input type="radio" value="#3"><br>
<input type="radio" value="#4">
<input type="checkbox" value="#1"><br>
<input type="checkbox" value="#2"><br>
<input type="checkbox" value="#3"><br>
<input type="checkbox" value="#4">
<input value="Move along, nothing to see here...">
Inputs can also have placeholders:
<input placeholder="Hello">
The <button> element is a button that can be stylized. It can contain other HTML elements; an image, for example. It automatically submits the form containing it when clicked, but can also be used as a link using onClick="location.assign('somewhere.php');"
<button onClick="location.assign('http://www.minecaptain.com');"></button> outputs:
Next, I will discuss the form and the relationships of its contents.
__RESOURCES__
http://www.minecaptain.com —My Website
Iframe —My Website as an iframe
The blank HTML file —Experiment!
Kommentare