HTML forms are essential components used to collect user input to attain data for surveys, polls, information for people's accounts, and much more. Some common form elements are text inputs, radio button inputs, and checkbox inputs. The data is processed via a button.
== Steps ==
=== HTML Form Basics ===
# Open the HTML editor to edit the HTML code.
#* Some examples of HTML editors are Notepad (Windows) and TextEdit (Mac).
# Open your tags.
#* Type the <HTML> tag into the very top of the HTML editor in order to begin the HTML code block.
#* Type the <form> tag into the HTML editor to begin the Form code block.
# Determine the type of information needing to be collected, such as information containing characters, numeric information, or encrypted data for passwords.
# Type the items you are requesting data for from users for, such as a username, password, name, phone number, etc.
#* These form attributes are collected via the form types and are created within the Form block tags, which are nested within the HTML tags.
# Close your tags.
#* Type the </form> tag to conclude the Form block.
#* Type the </HTML> tag at the very end of the code to conclude the HTML block.
==Examples of Form Input Types==
===Create a Text Input Field Using HTML===
# Some examples of inputs utilized for a 1 line text field are name (first and last), address (number, street name, city, state), and a username.
#* The following attributes are associated with the "input" tag single line text input to adjust the parameters:
#** Type: The tool you want to use to handle and enter user data (ex single line input text field, password, radio button options, checkbox options, dropdown list).
#** Name: Similar to creating variable names in code, enter a name for what you are going to be entering into the text field. For example, if you are entering a first and a last name as input, you should call the first name something along the lines of "firstname" or "fname" and "lastname" or "lname". These values will be used to retrieve/recognize the data inside the "value" attribute.
#** Value: This can be used to provide a default value to be automatically placed inside the text field. For example, if a survey was asking you to enter your first and last name and you set your values to "first name" and "last name", inside the text field, if a value attribute was used, it would display "first name" and "last name" respectively inside the text fields and would disappear when you start typing into the text field.
#** Size: The "size" attribute allows you to adjust the width (how long) your text field is. This is useful for making sure your page aligns properly and for support of larger and smaller inputs.
#** Max Length: This is used to cap the number of characters you can enter into a text field. For example, you could use this attribute when you are creating a password input field where you don't want it to be any longer than 25 characters.
#* Set the input type to "text".
===Change the size of the Text Input Field Using HTML===
# Use this to make the amount of text input area larger than the default size. It's great for entering multiple lines of user input.
#* An example of a multiple line input field: <textarea rows="10" cols="100" name="bio">Enter your performer bio here</textarea>.
#* The following attributes are associated with the "textarea" tag multiple line text input to adjust the parameters:
#** Name: Similar to creating variable names in code, enter a name for what you are going to be entering into the text field. For example, if you are entering a first and a last name as input, you should call the first name something along the lines of "firstname" or "fname" and "lastname" or "lname". These values will be used to retrieve/recognize the data inside the "value" attribute.
#** Rows: The number of rows (up and down) the text field needs to take up on the screen.
#** Cols: The number of columns (across) the text field needs to take up on the screen.
#* Instead of using an "input" tag, because it's a multiple line input text field, as well as an HTML element, you need to use a "textarea" tag.
#** This means when you create a multi line input text field, you use the <textarea...>...</textarea> tag, as opposed to using the <input...> tag used for a single line text input field.
===Create an Password Box Using HTML===
# This is used to create a password field
#* When you enter characters into the text field, they are displayed as a "*" character to protect the password
#* The password field works with 1 line of input
#* Just like a single line text input field, the "type", "name", "value", "size", and "max length" attributes can be used (see bullet 1 above)
#* Don't forget to set the input type to "password"
# Create Radio Buttons Using HTML
#* These are used for surveys where you can only input one response
#* The following attributes are associated with the "input" tag radio button to adjust the parameters:
#** Type: The tool you want to use to handle and enter user data (ex single line input text field, password, radio button options, checkbox options, dropdown list)
#** Name: Similar to creating variable names in code, enter a name for what you are going to be entering into the text field. For example, if you are entering a first and a last name as input, you should call the first name something along the lines of "firstname" or "fname" and "lastname" or "lname". These values will be used to retrieve/recognize the data inside the "value" attribute
#** Value: A name for the contents of the radio button the user selects, which is read on the server side
#** Checked: Set a radio button to be checked off by default by putting the word "checked" at the end of your "input" tag. It should look like <input type="radio" name="favoritefood" value="sushi" checked>
#* Set the input type to "radio"
===Create Checkboxes Using HTML===
# <form>
<input type="checkbox" name="option1" value="Coke"> I drink Coke<br>
<input type="checkbox" name="option2" value="Pepsi"> I drink Pepsi
</form>
#* Used in situations when the user can select zero, one, or many responses
#* The following attributes are associated with the "input" tag checkbox to adjust the parameters:
#** Type: The tool you want to use to handle and enter user data (ex single line input text field, password, radio button options, checkbox options, dropdown list)
#** Name: Similar to creating variable names in code, enter a name for what you are going to be entering into the text field. For example, if you are entering a first and a last name as input, you should call the first name something along the lines of "firstname" or "fname" and "lastname" or "lname". These values will be used to retrieve/recognize the data inside the "value" attribute
#** Value: A name for the contents of the checkbox the user selects, which is read on the server side
#** Checked: Set a checkbox option to be checked off by default by putting the word "checked" at the end of your "input" tag. It should look like <input type="checkbox" name="favoriteanimal" value="cat" checked>
#* Don't forget to set the input type to "checkbox"
===Define a Dropdown Menu List Using HTML===
# Sometimes called a "select list", each option appears in the dropdown menu with the ability to select one or more of the listed choices.
#* The first item in the list is displayed as default.
#* Each option in the dropdown menu is nested inside of the "select" tag in its own "option" tag. The more options you have in your menu, the more "option" tags you will have.
#* Both the "select" tag and "option" tag have their own attributes:
#** The "select" tag possesses the following attributes to adjust its parameters:
#*** Name: Similar to creating variable names in code, enter a name for what you are going to be entering into the text field. For example, if you are entering a first and a last name as input, you should call the first name something along the lines of "firstname" or "fname" and "lastname" or "lname". These values will be used to retrieve/recognize the data inside the "value" attribute.
#*** Size: This can be used to allow the dropdown menu to scroll if many options are present in the menu.
#*** Multiple: The user is allowed to select multiple items from the dropdown menu.
#** The "option" tag possesses the following attributes to adjust its parameters:
#*** Value: A name for the contents of the dropdown menu the user selects, which is read on the server side.
#*** Selected: Set a dropdown menu option to be selected by default by putting the word "selected" at the end of your "option" tag. It should look like <input type="dropdown" name="favoritelunchmeat" value="ham" selected>.
#*** Label: An alternate way to name items in the dropdown list while using the same name for your label as you do your "value".
#* Instead of using an "input" tag, because "select" is an HTML element, you need to use a "select" tag.
#** This means when you create a dropdown menu, you use the <select...></select> tag, as opposed to using the <input...> tag used for a single line text input field.
===Numeric Input Types Using HTML===
# <form>
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10">
</form>
#* These are used to enter data into a field involving use of numeric inputs, usually on a single line.
#* You can also place the following input restrictions upon numeric input:
#** Disabled: Prevents the user from entering any data into the text input field
#** Max: The maximum numeric value that can be entered into a text input field
#** Maxlength: The maximum number of characters that can be held in a text input field
#** Min: The minimum numeric value that can be entered into a text input field
#** Pattern: A regular expression where you can check the input value against the value of the regular expression
#** Readonly: The data in the input field is "read only" and cannot be changed
#** Required: The input field mandatorily needs to be filled out in order to proceed
#** Size: Width (in characters) of an input field
#** Step: Only numbers in the given "step" interval are considered to be valid input. For example, if the step is 3, -3,0,3,6,9, etc. are valid input values. This only works with certain input types.
#** Value: The default value (starting number) for the input field
#* Set the input type to "number"
===Examples of Button Input Types===
# Create a Submit Button Using HTML
#* <form action="test_page.php">
First name:<br>
<input type="text" name="first" value="John"><br>
Last name:<br>
<input type="text" name="last" value="McDee"><br><br>
<input type="submit" value="Submit">
</form>
#* The Submit button uses its input to be forwarded to a "form handler", which is a page on the server side specified in the "form action = __" tag that processes the input data. The form on the page is submitted and the results appear in the URL specified in the "form action = __" tag within the browser.
#* If there is no "value" attribute listed, the button will display its default value ("submit").
#* The following attributes are used with submit (and other) buttons:
#** Name: The name on the server side of the button (used for the backend only)
#** Value: The text you want to be displayed on the button
#** Align: How you want the button aligned on the page. Possible and valid values are "TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP (aligns the top of the button with the top of the tallest text in the line), BASELINE (aligns the image with the baseline of the current line), ABSMIDDLE (aligns the button with the middle of the current line), and ABSBOTTOM (aligns the button with the bottom of the current line)".
#** Tabindex: defines the order each field should be activated when the user clicks the tab key while hovering the mouse by the button. Values are denoted by a number.
#* Set the input type to "submit".
===Create a Reset Button Using HTML===
# <form action="test_page.php">
First name:<br>
<input type="text" name="first" value="Chase"><br>
Last name:<br>
<input type="text" name="last" value="Stonewater"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
#* Used to erase form data from the text inputs and make them display blank again or with their initial (default) values.
#* If there is no "value" attribute listed, the button will display its default value ("reset").
#* Used in conjunction with a Submit button
#* Uses the same attributes as a "Submit" button (see above section on "submit buttons")
#* Set the input type to "reset"
===Create a General Button Using HTML===
# <input type="button" onclick="alert('Test!')" value="Press the Button!">
#* Creates a generic button
#* Has no event handler until one is assigned
#* Event handlers declared with onclick="">
#* Uses the same attributes as a "Submit" button (see above section on "submit buttons")
#* Don't forget to set the input type to "button"
== Tips ==
*Make sure your browser is compatible with the HTML.
*Preview your code as a draft before publishing it as a final copy to your website to ensure no formatting or syntax (code) errors exist.
*Check your tags to make sure they are closed properly.
*Set a destination location for the forms to submit to in the "form action = __" tag.
*Specify the proper input type or form element you intend on using.
*Anything sitting within a <...> in your code should all be typed in lowercase.
No comments:
Post a Comment