I have struggled with the input element a lot in my HTML journey. It's something that I find quite daunting for some reason. So I decided to go over it again and make notes to explain it to myself. Then I thought that I would put those notes here just in case they might be helpful to someone else.
So...the syntax goes as follows (not necessarily in this order, this is just the order I learned it)
<label for="house">
<input id="house" type="radio" name="accomodation" value="house" default checked>
</label>
Label for... This is the way that you connect the word "house" with the input on the form. The label is to help people understand what they are clicking on. It also helps screen readers or other accessibility software describe the site in a useful way to those who need it.
input id... This should be the same as the label so that they are connected and people will know what they are clicking.
type... This can be a number of different things. Radio buttons, checkboxes and text inputs are just a few examples.
name... This is the name of the group of options you can select from. Any elements with the same name will be grouped together. In the case of radio buttons, only one option with the name accomodation would be selectable.
value... This is the one that always baffled me until today. Value is how the information from the form will be stored. If not specified, the value for "value" when it is selected will be "on". This is obviously not very useful if you have a bunch of different information on one form. Specifying a value in this part will mean that the information will be understandable when it is processed. In this example the information sent when the form is submitted would be "accomodation=house" because the value is set to "house".
default... If nothing is selected and the form is submitted, the default selection will be chosen. This has different outcomes depending upon the type of input used. For radio buttons and checkboxes it sets the option as "checked". For text boxes and passwords it is used to define the text that appears in the boxes before they are interacted with. For buttons it is used to define the text written on the button.
checked... As far as I am aware (meaning that I can't find any information to the contrary) checked is only used with radio buttons and checkboxes and serves the same function as using default. Please do let me know if that's wrong.
It's definitely not a full list of all the options available, but I know that I understand it a lot better than I did before. I think that explaining a system in your own words helps you understand what that system does and solidifies what you have learned. That's the main reason I have written this. If you see anything wrong here, please let me know so that I can learn from it.
Finally, please don't assume that I know what I'm talking about. This is literally just a longer form version of the notes I took while I was working through the input section of my web development course. I might be wrong about some part or all parts of it.
Much Love,
Anton
Top comments (0)