<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
Year Level:<select name = "year">
<option value = 7>7</option>
<option value = 8>8</option>
<option value = 9>9</option>
</select>
<input type="submit" value="Submit">
</form>
In this example we have created a basic form which includes:
Text Input
Radio buttons
Drop Down List of values
Submit Button
<input type="text">
Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting one of many choices)
<input type="submit">
Defines a submit button (for submitting the form)
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Each element in a form needs to have an id and name. The name is used for referencing in PHP and ID is used to identify element in JavaScript and JQuery
This is important that each element has a clear id so values can be referenced when entering into a data structure. You can not have a duplicate ID name in the same page.
Creating a Dynamic Form that can grow
If you wish to add repeat rows in a form to enter muliple rows of data, you can name each form element name as an array.
example
<input name ="names[]">