FacebookTwitterGoogle+Share

A very simple form

I’m going to explain a very simple HTML form, that is prepared for processing by PHP. Then later I’ll describe a similar PHP file that retrieves a client list from a database.

Here’s the form we’ll be looking at:

Quiz maker

Client:

Name:

Question Answer


Ignore the styling if you can, it’s getting that from the GC’s CSS. Here’s the HTML for that form:

<h1>Quiz maker</h1> <!-- Heading one, the first level of headings.  Similar to h2, and h3.-->
<form method="post" value="form-handler.php" > <!-- This is where we specify the file that will process the form, once it's been submitted.  We haven't written this guy yet. -->

<p>Client: <select name="ClientId">
	<option value="0">Select a client</option>
	<option value="3">The International Test Company</option>
	<option value="4">agency&bull;nu</option>
	<option value="14">J# Industries</option>
</select></p>

Select tags make those select boxes. Each option of a select box is defined by one of those nested option tags.

The value attribute of the selected option is what will be sent when the form is submitted. In this situation, we want to send the ClientID.

<p>Name: <input type="text" name="QuizName" value="MyFirstQuiz" /></p> <!-- An input of type text gives you a single-line box that you can type into. -->

<table>
	<tr> <!-- This guy specifies a table row, which ends at the next </tr> tag. -->
		<th>Question</th><th>Answer</th> <!-- A table heading field. -->
	</tr>
	<tr>
		<td><input type="text" name="questions[]" /></td> <!-- The name field of a form element is how we will access the submitted data during the processing phase.  The [] at the end of the name means php will read this data as new element in a questions array.  This way, we can loop through the two arrays (questions, and answers) and they will match up. -->
		<td><input type="text" name="answers[]" /></td>
	</tr>
	<tr>
		<td><input type="text" name="questions[]" /></td>
		<td><input type="text" name="answers[]" /></td>
	</tr>
	<tr>
		<td><input type="text" name="questions[]" /></td>
		<td><input type="text" name="answers[]" /></td>
	</tr>
</table>

<input type="submit" value="Create &raquo;" /> <!-- This guy makes the button we'll have to press to submit the form. -->
</form>

That's basically it. Next time: The same thing but with more PHP 😛

 

Comments

  1. […] going to create the same form as last time, but enhance it a bit using PHP and MySQL. Where applicable, I’ve linked parts of the code to […]