FAQ: Learn HTML: Forms - Forms Review

The HTML Forms review page says:

Setting type to "list" will pair the with a element if the id of both are the same.

However, section “11. Datalist Input” had us use the type of ‘text’ but set the list attribute to the ‘id’ of the datalist.

1 Like

Hello there, I think there is an error in the review section of the HTML Forms lesson, exactly in bullet point before the last one. We didn’t set the input type to list to associate it with the datalist. We actually added a new attribute to the input that has the same value as the id’s value of the datalist element.
Please correct me if I’m wrong!

My Form

Create a bet!

What type of sport?
	<input type="radio" name="sporttype" id="sporttype" id="football" value="football">
	<label for="football">Tennis</label>

	<input type="radio" name="sporttype" id="sporttype" id="football" value="football">
	<label for="football">Rugby</label>

	<input type="radio" name="sporttype" id="sporttype" id="football" value="football">
	<label for="football">Boxing</label>

     <label for="other">Other</label>
	 <select name="other" id="other">
	 	<option value="Hockey">Hockey</option>
	 	<option value="Basketball">Basketball</option>
	 	<option value="Baseball">Baseball</option>
	 	<option value="Hockey">Badminton</option>
	 	<option value="Tabletennis">Table tennis</option>

   <h1>What type of bet do you want?</h1>
        <section class="bettype">
          <h1>What type of bet do you want?</h1>
          <input type="checkbox" name="" id="lettuce" value="lettuce">
          <label for="lettuce">Lettuce</label>
          <input type="checkbox" name="topping" id="tomato" value="tomato">
          <label for="tomato">Tomato</label>
          <input type="checkbox" name="topping" id="onion" value="onion">
          <label for="onion">Onion</label>

Hi, can anyone help me. I am trying to get my header to print which says 'What type of bet do you want? on the form on code academy they used a span method but that does not seem to work either. please help

HTML is not a program. It is a declaration. We provide the facts, and we provide the layout for presenting those facts. Our markup, including attributes helps to describe both content and role. It only has real meaning when we don’t confuse the reader.


As for form headings, think of FIELDSET and LEGEND as a possible fit.

Hi everyone, just finished the Learn HTML: Forms Review lesson.

By the end of the lesson, you learn how to create a form for creating a custom burger, but you can see that the form itself scrolls past the extent of the background graphic behind it (e.g. my Submit button falls off the pale blue background set in place by default).

This might be a question for later on once the curriculum has me working directly with CSS, but is there a way to constrain the form so visually, it stays within the bounds of the background beneath? Thanks. :slight_smile:

I think I might have just answered my own question here. The space in the IDE simply was too crowded for the form to fit onto the background. Opening the .html file in a separate tab of its own did the trick. Hurray!

I was wondering the same thing and I think it is a mistake based on this ww3 page I think that they are no list value for the type attribute. I also tried in VS code no type=“list” there either.

I tried to create a radio button just to try it out by myself, and it showed an error saying “the id value [yes] must be unique” (the options were “Yes” or “No”) this kept happening till I took out the id attribute on both elements. But in the lesson we were told to use “id” along with “for” and “value” [I think this is for association purposes? I am really new to this so I may be wrong). Is “id” not necessary for radio buttons?

No, unless you want to bind it to a for in a label. When the controls are wrapped by the label, the binding is not needed. The only necessary attribute is name.

Thanks so much for clarifying :grinning:

1 Like

Last question :pray:t5: is this an either/or situation? Like I could use “id” or “value”, but “name” has to be there for the binding?

name is there for the GET query, or the POST data array in the request header. The browser knows how to compose both (obviously) which is why it is a needed attribute. value can be left off the code since the browser creates and populates it, as needs be. id is only necessary when we need global access to the element (such as ‘for’, but also for a selector that can be targeted uniquely by CSS, JS, or in the location bar as a page fragment).

Bottom line, place need ahead of arbitrary design choice when it comes to using id. And, remember there are many ways to traverse the DOM. The parent-child inheritance model is intrinsic.

1 Like

Thank you so so much :heart:

1 Like

iam a a beginner to html and i really need a few book recommendations to strengthen my html knowedge.

Suggest join SitePoint Premium (annual membership ~100$) and take advantage of their many free/low cost ebooks and/or pick up some of their top quality books. I’ve a shelf full of them and never regretted spending a dime.

I would but any books that you recommend because I know nothing about html other than the course Iam taking

Look for an older book on HTML (the one by Ian Lloyd, for instance so you can learn about the core HTML (HTML 4.0) and CSS 1 & 2. Augment that with a newer book on HTML5 and CSS3 such as the one by Alexis Goldstein.

Though I gotta say, the Codecademy Web IDE has basically no helpful IDE features, like auto-suggestions, code completion etc. so having to type out all the HTML brackets and so on manually can get very tiresome, so while you’re partly right imo, I’m also glad there isn’t yet more typing to do…

What can we do to reject the submission of data when the Submit button is pressed but some data is missing, i.e. some fields are still emtpy. To make either certain inputs or the entire form mandatory before data can be submitted, can we use HTML or would this require scripting (or even a preliminary query to the server that would then check the input for completeness and reply to request complete form from the user or sth)?