Intro to HTML: Text Boxes
Text boxes are a way for the user of a website or application to enter input. That input can effect how the application works or it can be stored in a database.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.
<!DOCTYPE html>
<html>
<head>
<!-- Page Title-->
<title>Page Title<title>
</head>
<body>
<!-- Form-->
<form method = "post" action = "main.php">
<!-- Text Boxes-->
<h3>First Name</h3>
<input type="text" name="firstName" placeholder="First Name" required><br>
<h3>Last Name</h3>
<input type="text" name="lastName" placeholder="First Name" ><br>
<h3>Email</h3>
<input type="email" name="userEmail" placeholder="youremail@email.com" required><br>
<!-- Submit Button-->
<input type='Submit' value='Submit'>
</form>
</body>
</html>
➼ <form></form> - This is the form.
➼ <input> - These are text input elements (text boxes).
➼ text - Text displayed before text boxes, I used h3 tags, but you
can use any text tag (label,span,headings,strong ect) or no tag at all.
➼ type = text - The input type is text. That means text boxes.
➼ type = email - The input type email is a special text box for emails. It will check to make sure the user's input
is formatted like an email address.
➼ name = '' - The name attribute is a way to uniquly identify each text box. You will use these names
when you write the PHP code to make the form work.
➼ placeholder = "" - This attribute will equal the text that displays inside the text box.
➼ required - The input fields marked required must be filled out for the form to submit. So the user has to fill out the first name and email, but can leave off the last name and still submit the form.
➼ Submit Button - The code in
➼ main.php will be executed. You will leran how to write the code for this form in the PHP Post lesson.
Run the code in the code editor box below. Then, play around and make changes to see how the form changes.