Intro to HTML: Forms
An HTML form contains elements that allow for user input.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.Input Input, allows the user to fill in information or select options. HTML forms are easily made functional using PHP. In this lesson we will just learn the HTML. You will be able to set up the user's view. Once you get to the PHP 'Post' lesson, in the PHP lessons, you will be able to make the form work.
HTML is used to display stuff, however it is not capible of actually doing things. On the front end, you can use javascript to write logic. On the backend (server side with the database), you can write your logic in PHP. There are other languages that can be used, but these are the languages covered in this tuturial. It is also a popular combination of languages.
Programming logic is the stuff you write that actually makes your application work. You can build a form in HTML. The user will see the form. They can click around. But nothing happens when the user clicks.
Let's say you have a form with radio buttons. Each radio has a different color option: red, yellow, blue and green. When the user selects the color and presses submit, the font color on the page will change. You will have to write logic to make the radio buttons work. HTML can dispaly the options but it cannot make the font color change based on the user's input.
This element is essential to your from. Make sure to include it. The type attribut will depend on the situation. In the turtorials on the indivual input types, I will go over more specifics. This lesson is int3eded to give you a general idea on how to set up a form.
This is where the magic happens. In the PHP tutorials, you will learn how to make the button work. When working with PHP,
the form's action attribute will usually equal a PHP file location. This is the location of the code that is needed to make
your submit button work. When the user clicks submit, the code in the PHP file will run.
Example: Imagine you fill out an online application. At the end you click the submit button. That will run a server side script. That code will
store your information in a database and give you a message that your application was recieved. An alert or email will probably be sent to the person(s)
in charge of handling online applications.
Using HTML and PHP (plus a database, such as MySQL) you can create the example above. We will do simular projects throughout these tutorials.
<!DOCTYPE html>
<html>
<body>
<!-- Form-->
<form action = 'main.php'>
<!-- User's makes selection-->
<label>Which berry would you like on your ice cream?</label><br>
<input type='radio' name='berry' value='1' checked> Blueberries<br>
<input type='radio' name='berry' value='2'> Strawberries<br>
<input type='Submit' value='Submit'>
</form>
</body>
</html>
➼ <body></body> - Your Form will go in the body of the page.
➼ <form></form> - Form Element
➼ action = 'main.php' - When the user clicks the submit button, the code in main.php will run. This is the logic.
➼ <label></label> - The question to the user is placed in the label tags.
➼ <input type='radio'...> - These are the imput elements that allow the user to
make a selection. In this case radio buttons are used. The user will select strawberry or blueberry.
➼ <input type='Submit'... > This is the submit button. On click, the code
on 'php.main' will execute.
Now, run the code in the code editor box below. Then play around and make your own changes.
