Why Submit Button have Different Coding In Html 5 ?

[2020]

Html 5 Folks,

I got the code from here:
https://www.tutorialspoint.com/html5/html5_web_forms2.htm

It shows the Submit & reset button html 5 code to be this:

<input type = "submit" value = "send">
<input type = "reset">

Q1.
Will this be incorrect or not and if not then why not ?

<input type = "reset" value = "reset">

Q2.
On some tutorials, I see the Submit button code to be like the following if I remember correctly. None of them are not the same as the one I mentioned just above.
Which ones are correct ? Give your ranking according to preference and explain your preference reason.

<input type = "button" value = "submit">

<input type = "submit" value = "submit">

	<button type="submit" class="login" name="login">Login</button>
	

Why is this one "button=type" while all the rest "input type='submit' ?

Which one better to use ?

 

[2020]

Should I use single or double quotes on html input type mentions ?

<input type='radio'

<input type="radio"

[2020]

Why do they add closing "/" at the end ?

	<input type="submit" value="Submit now" />
	

https://html5-tutorial.net/forms/multiline-textboxes-textarea/

 

What is the purpose of "/" at the end ?

	<input type = "text" name = "search" placeholder = "search the web"/>
	

https://www.tutorialspoint.com/html5/html5_web_forms2.htm
 

Edited July 11, 2020 by 2020

[2020]

Also, why some line breaks like this ?

<br>

while others like this:

< /br>

https://html5-tutorial.net/forms/multiline-textboxes-textarea/

Edited July 11, 2020 by 2020

[2020]

Hi,

If you notice, all html 5 input types have a "label for="", apart from the drop down. it is like this:

	Agree to TOS or not ?
<select name="tos_agreement" id="tos_agreement">
<option value="yes">Yes</option>
<label for="yes">Yes:</label>
<option value="no">No</option>
<label for="no">No:</label>
</select>
	

Is it ok to add it like this ("label_for" on both the question and options):

	<label_for="tos_agreement">Agree to TOS or not ?</label>
<select name="tos_agreement" id="tos_agreement">
<option value="yes">Yes</option>
<label_for="yes">Yes:</label>
<option value="no">No</option>
<label _for="no">No:</label>
</select>
	

.... or like this ("label_for" on the question only and not on the options):

	<label_for="tos_agreement">Agree to TOS or not ?</label>
<select name="tos_agreement" id="tos_agreement">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
	

...or like this ("label_for" on options only and not on the question):

	Agree to TOS or not ?
<select name="tos_agreement" id="tos_agreement">
<option value="yes">Yes</option>
<label_for="yes">Yes:</label>
<option value="no">No</option>
<label_for="no">No:</label>
</select>
	

NOTE: I made a mistake above. It should be "label for" and not "label_for".

Edited July 11, 2020 by 2020

[2020]

@requinix

@macguyver

I appreciate your feed backs.

Edited July 11, 2020 by 2020

[2020]

@barand,
@requinix,

@macguyver,

Admin Folks, teach me your way of coding!

How to add Labels on Radio Buttons ?
Well, 2 tutorials show 2 different ways.
Which one is html 5 correct ?

1.
https://www.w3schools.com/tags/att_input_type_radio.asp

 <input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>

2.
https://html.form.guide/snippets/html-radio-button-label/

<label>
 <input type="radio" id="male" name="gender" value="male /">Male
 </label>
<label>
 <input type="radio" id="female" name="gender" value="female /">Female
 </label>

IMPORTANT:
Why is the a "/" at the end of the "value" on the 2nd example but not on the 1st example ?

Edited July 11, 2020 by 2020

[kicken]

3 hours ago, 2020 said:

Q1.
Will this be incorrect or not and if not then why not ?

It's fine.  Though you ideally shouldn't have a bunch of spaces everywhere like you do.  Just put a space between attributes, not around the =.

3 hours ago, 2020 said:

Q2.
Which ones are correct ?

Using <input type="button"> creates a simple button that effectively does nothing.  It will NOT submit your form.  This type of button is mostly used in combination with javascript.

Using <input type="submit"> creates a simple button that will submit the form and is a standard practice for submitting forms.

Using <input type="reset"> creates a simple button that just resets the form's fields to their default values, it does NOT submit the form.

Using <button> allows you to create nicer button because it allows more than just text.  For example, you can combine text and an image.
 

<button type="submit">
  <img src="/images/search.png" alt="">
  Search
</button>

With <button> you also have type="button", type="submit", and type="reset" which have the same semantics as on <input>.

3 hours ago, 2020 said:

Should I use single or double quotes on html input type mentions ?

It doesn't really matter, though I personally find double-quotes on attribute values to be more correct and causes fewer issues.  Use which ever one you want, but be consistent and use the same one everywhere.

3 hours ago, 2020 said:

Why do they add closing "/" at the end ?

This is an artifact of the days when XHTML was popular and the thing to use.  It's called a self-closing tag and is necessary in XHTML as everything must have an open and close tag to be XML compatible.

These days it's best to stick to plain HTML which does not use XHTML specific things like self-closing tags.

2 hours ago, 2020 said:

Is it ok to add it like this ("label_for" on both the question and options):

First of all, it is <label for="">, there's no underscore in there anywhere.   

Second, no you do not provide labels for each option in a select.  The label is to describe the input as a whole, your options are labeled by their text content.

2 hours ago, 2020 said:

How to add Labels on Radio Buttons ?
Well, 2 tutorials show 2 different ways.
Which one is html 5 correct ?

They are both correct.  It's mostly a matter of preference, or sometimes dictated by your layout.

<label> can be be associated with an input either with the for attribute, or by having the input enclosed within it.  Enclosing the input is convenient, but it may not always be possible when considering layout requirements.  

 

[Barand]

When you use <label for="xxx"> then the xxx should be the id of the object being labelled.

This is useful with radio buttons or checkboxes and enables the user to click either the object or the label to check or uncheck.

In your examples, <label for="yes"> is wrong since "yes" is not an id of anything.

[2020]

15 hours ago, kicken said:

It's fine.  Though you ideally shouldn't have a bunch of spaces everywhere like you do.  Just put a space between attributes, not around the =.

Using <input type="button"> creates a simple button that effectively does nothing.  It will NOT submit your form.  This type of button is mostly used in combination with javascript.

Using <input type="submit"> creates a simple button that will submit the form and is a standard practice for submitting forms.

Using <input type="reset"> creates a simple button that just resets the form's fields to their default values, it does NOT submit the form.

Using <button> allows you to create nicer button because it allows more than just text.  For example, you can combine text and an image.
 

<button type="submit">
  <img src="/images/search.png" alt="">
  Search
</button>

With <button> you also have type="button", type="submit", and type="reset" which have the same semantics as on <input>.

It doesn't really matter, though I personally find double-quotes on attribute values to be more correct and causes fewer issues.  Use which ever one you want, but be consistent and use the same one everywhere.

This is an artifact of the days when XHTML was popular and the thing to use.  It's called a self-closing tag and is necessary in XHTML as everything must have an open and close tag to be XML compatible.

These days it's best to stick to plain HTML which does not use XHTML specific things like self-closing tags.

First of all, it is <label for="">, there's no underscore in there anywhere.   

Second, no you do not provide labels for each option in a select.  The label is to describe the input as a whole, your options are labeled by their text content.

They are both correct.  It's mostly a matter of preference, or sometimes dictated by your layout.

<label> can be be associated with an input either with the for attribute, or by having the input enclosed within it.  Enclosing the input is convenient, but it may not always be possible when considering layout requirements.  

 

Thank you.

Sorry, I did not understand this part and so care to elaborate:

"<label> can be be associated with an input either with the for attribute, or by having the input enclosed within it.  Enclosing the input is convenient, but it may not always be possible when considering layout requirements.  "

Also, are you saying these 2 are identical:

	<button type="submit"> <img src="/images/search.png" alt=""> Search </button>
	

	<input type="submit"> <img src="/images/search.png" alt=""> Search </button>
	

From what I understood, if I need to add img on the button then I use the former. But, latter will be wrong ? Cannot use "<input type=" if I want to add img on the button ?

[2020]

13 hours ago, Barand said:

When you use <label for="xxx"> then the xxx should be the id of the object being labelled.

This is useful with radio buttons or checkboxes and enables the user to click either the object or the label to check or uncheck.

In your examples, <label for="yes"> is wrong since "yes" is not an id of anything.

Thank you. I thought the "label_for" must match the "name=" and not the "id=". Thanks for bringing this to my attention.
Look, here's the confirmation:

https://html.form.guide/snippets/html-radio-button-label/

	<input type="radio" id="sizeSmall" ... /> <label for="sizeSmall">Small </label>
	

 

https://www.w3schools.com/tags/att_input_type_radio.asp

	<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
	

I was blind not to see them examples staring at my face.

 

So, I guess both are correct, especially the 1st one:

 

1.

	 <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br>
	https://www.w3schools.com/tags/att_input_type_radio.asp
	

2.

	<label>  <input type="radio" id="male" name="gender" value="male /">Male  </label> <label>  <input type="radio" id="female" name="gender" value="female /">Female  </label>
	

https://html.form.guide/snippets/html-radio-button-label/

 

I guess they did the xhtml thing on the 2nd one and so ignoring the " /". I read once about this that for xhmtl they do the closing thing " /" but I forgot about it and Kicken reminded me.

But, I did not udnerstand what Kicken meant about <label>.

Why some do <label for=> while others do just <label> ? I thought the latter was old stuff.

But,

[2020]

@Kicken,

 

You said:

"First of all, it is <label for="">, there's no underscore in there anywhere.   

Second, no you do not provide labels for each option in a select.  The label is to describe the input as a whole, your options are labeled by their text content."

I knew this to be true too. So, it should be:

	<label for="gender">gender</label><br>
<input type="radio" id="male" name="gender" value="male">
<input type="radio" id="female" name="gender" value="female">

Q1. Am I right it really should be like the above. Do you people do it like it too ?

Anyway, why they complicated here by giving "label for=" for each option ?

https://www.w3schools.com/tags/att_input_type_radio.asp

	<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
	

It is this sample that confused me. And so, I opened this thread. Now you know where all my questions and confusions are coming from.

Also,

@barand,

@macguyver,
@requinix,
@benanamen,

Which one out of the 2 would you lot use. (I really shouldn't be naming you folks like this. But hey, no harm in learning your styles and hassling you just a little to squeeze some info out for learning purposes. It would benefit new people to this thread too! )!
 

Edited July 12, 2020 by 2020

[Barand]

7 hours ago, 2020 said:

Anyway, why they complicated here by giving "label for=" for each option ?

So the user doesn't have to guess which radio button is for "Male" and which is for "Female" of course.

[cyberRobot]

On 7/12/2020 at 5:12 AM, 2020 said:

Why some do <label for=> while others do just <label> ? I thought the latter was old stuff.

You only need to use the "for" attribute if there is something between the form input and the corresponding form label. I avoid using "for" whenever possible because it's cleaner / less code. However, there are cases where I needed to use the "for" attribute. More information about the <label> tag, along with the benefits of using the tag, can be found here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

FYI - the following code is acceptable:

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

However, I would actually change it to the following:

<label><input type="radio" name="gender" value="male"> Male</label>

 

On 7/12/2020 at 5:21 AM, 2020 said:

Anyway, why they complicated here by giving "label for=" for each option ?

As Barand mentioned, <label> tags are designed to associate a input field (e.g. input tag, textarea, etc.) with it's corresponding field label. So, in the example provided, the "Male" label needs to be connected with the corresponding radio button. The same goes for the "Female" label. Note: if the <label> tags are set up properly, clicking the label should put focus on the corresponding input field. In the case of radio buttons, clicking the label will select the radio button associated with the clicked label.

[cyberRobot]

On 7/12/2020 at 5:01 AM, 2020 said:

Also, are you saying these 2 are identical:

<button type="submit"> <img src="/images/search.png" alt=""> Search </button>

 

<input type="submit"> <img src="/images/search.png" alt=""> Search </button>

 

I haven't run into a situation where I've needed a submit button with both text and an image. But here's what Kicken mentioned earlier:

On 7/11/2020 at 1:14 PM, kicken said:

Using <button> allows you to create nicer button because it allows more than just text.  For example, you can combine text and an image.

 

Alternatively, you could make the text part of the image and use <input type="image">, which also submits the form. More information can be found here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

[Komal28]

I didn't understood the reason behind using < /br>, can anyone explain?

[requinix]

5 hours ago, Komal28 said:

I didn't understood the reason behind using < /br>, can anyone explain?

<br/> (note where the slash goes) is XHTML-compliant. XHTML is a combination of HTML and XML and requires that documents are valid XML. Writing <br> implies that there must be a closing </br> later on, but that is not valid HTML. Thus the self-closing <br/>.

Nobody cares about XHTML anymore. Don't write self-closing tags - use <br> instead of <br/>, <img> instead of <img/>, <link> instead of <link/>, etc.

[StevenOliver]

On 7/24/2020 at 11:41 AM, requinix said:

Nobody cares about XHTML anymore. Don't write self-closing tags - use <br> instead of <br/>

Your post "nobody cares about XHTML" makes me happy. I've always thought XHTML is ugly, with all their stupid closing tags, but I always felt bad for writing code that wasn't "the new modern XHTML" that everybody is using. I'm glad I waited. Now it is passe. Like saying "rad." :-)

Hopefully if I wait long enough, "Register Globals" will come back, too 😀

Edited July 28, 2020 by StevenOliver

[requinix]

13 minutes ago, StevenOliver said:

Your post "nobody cares about XHTML" makes me happy. I've always thought XHTML is ugly, with all their stupid closing tags, but I always felt bad for writing code that wasn't "the new modern XHTML" that everybody is using. I'm glad I waited. Now it is passe. Like saying "rad." 🙂

I like XHTML. At least the principles behind it. Bit out of date, now.

 

Quote

Hopefully if I wait long enough, "Register Globals" will come back, too 😀

Hell may freeze over, pigs may fly, and our Tangerine-in-Chief may suddenly become a reasonable and intelligent man overnight, but register_globals will never come back.

[StevenOliver]

OMG.... you're right! Those 3 things already did happen, and still, no register_globals!
😀 />