PHP drop-down list - Part 1 (Knowing thy elements)

February 14, 2017 by Christoff Truter PHP  

In this series of posts I am going to create a PHP drop-down list, I am going to follow an evolutionary approach (simple code to more complex, while explaining my thought processes along the way) and hopefully end up with something useful.

Observe the following snippet.

<form method="POST">
	<select name="friends">
		<option>Not Selected</option>
		<option>Gerhardt Stander</option>
		<option>Bronwen Murdoch</option>
		<option>Maree Kleu</option>
	</select>
	<br>
	<input type="submit" value="Go">
</form>

The select element is the part we need to implement, along with its option (child) elements.

Now this is our starting point, we need to understand our markup first.

Select Element

In addition to the general HTML attributes, the following additional attributes are supported in the HTML spec, the rows highlighted in red were added in the HTML5 spec.

Attribute	Description
autofocus	Specifies that the drop-down list should automatically get focus when the page loads
disabled	Specifies that a drop-down list should be disabled
form	Defines one or more forms the select field belongs to
multiple	Specifies that multiple options can be selected at once
name	Defines a name for the drop-down list
required	Specifies that the user is required to select a value before submitting the form
size	Defines the number of visible options in a drop-down list

HTML5 attributes are currently not fully supported by all major browsers, if we're interested in using them we'll need to supply some kind of crutch library (aka polyfills), for now we're going to give them a skip.

I am going to ignore the multiple attribute, since this is more related to list boxes and we're more interested in a drop-down list at this stage.

I am going to ignore the size attribute as well, as it is generally only relevant to list boxes, and I also felt its something more suited to the CSS domain, but apparently this attribute cannot be set via CSS (so if we ever get to the point where we're going to create a list box, this attribute will be included in those classes).

Representing this element using PHP would look something like this:

class HtmlSelectElement
{
	public $Name;
	public $Disabled;
	public $Children;
	
	public function __construct($name, 
		array $children = [], 
		$disabled = false)
	{
		$this->Name = $name;
		$this->Disabled = $disabled;
		$this->Children = $children;
	}
}

Note that the $children property will contain a list of option elements.

Option Element

In addition to the general HTML attributes, the following additional attributes are supported in the HTML spec.

Attribute	Description
disabled	Specifies that an option should be disabled
label	Specifies a shorter label for an option
selected	Specifies that an option should be pre-selected when the page loads
value	Specifies the value to be sent to a server

I am excluding the label attribute from my code, simply because its not supported by all major browsers and quite frankly it is quite pointless, not sure why the spec writers even included it in the first place - the same thing can be achieved using the value and inner text of the element.

Representing this element using PHP would look something like this:

class HtmlOptionElement
{
	public $Disabled;
	public $Selected;
	public $Value;
	public $Text;
	
	public function __construct($text, 
		$value = null, 
		$selected = false, 
		$disabled = false) 
	{
		$this->Text = $text;
		$this->Value = $value;
		$this->Selected = $selected;
		$this->Disabled = $disabled;
	}
}

Interestingly, looking at the default values for each property, you will notice the $value property is null, this is in line with the HTML spec, we're not required to specify a value.

If we omit a value, the inner text of the element will be used as value.

In part 2 we're going to take these classes and serialize aka render them.