FAQ: Learn HTML: Forms - Forms Review

3 posts were split to a new topic: Where do answers on a form go after hitting send or submit?

2 posts were split to a new topic: How can I create an option so user’s can enter their own topping?

span vs. label tags


<section class="toppings">
          <span>What toppings would you like?</span>
          <br>
          <input type="checkbox" name="topping" id="lettuce" value="lettuce">
	  ....

<section class="bun-type">
          <label for="bun">What type of bun would you like?</label>
          <select name="bun" id="bun">
	  ...

to write text also we can use “p”," h1…h6" tags (and prolly even more ways) BUT can some one please explain in which cases we should use , ??? and why not “p” or “h1” (we use “h1” only for headers, right ?!) thanks

1 Like

If I make a separate project that has an input request as a number, how can I take that number and add/subtract it from a variable in javascript in the same project?

A post was split to a new topic: Incorrect information in Forms Review

2 posts were split to a new topic: What does id and name do for an input tag?

Question here! For the textarea element, which goes like this:
<textarea id="blog" name="blog" cols="30" rows"5"> </textarea>

From my understanding, when you put text between the opening and closing tags for textarea, text appears in the text box. I thought logically this should be achievable using a value attribute instead but it doesnt? Can anyone explain why this is the case? This is what I mean:
<textarea id="blog" name="blog" cols="30" rows"5" value="Text here"> </textarea>

Narrow things down to what the user is submitting.

<textarea>User input</textarea>

The API is not looking for a value attribute on that HTMLElement. It’s looking for a text node.

If we are submitting this, then it will need a name attribute. If it is not being styled, then id and class are frivolous. Like as always, we preach traversal against id and class; but, to each their own.

Hello guys, maybe this a bit more advanced, but after I finished my Forms chapter, I am challenged to create a form myself using some of the tools taught.

I was considering to create a small project where users would insert their phones, but instead of asking for them to type their country code, how can I make sort of a datalist where the available countries are shown? Is this a JS thing?

There are a variety of ways that could be accomplished, though an AJAX approach is probably best. If all the CCs are hard coded into the HTML it could make for a rather large document. A server-side data base is better suited, and easier to maintain. That steps out of the purview of this module, so add it to your future topics list for further research once you start working with a server and db.

2 Likes

Great, thanks for the support on it!

1 Like

Hello,

Is there a ‘final form’ we can use to compare with the form we build in the exercises?

It would be nice to see a decent sample size of information entered in the burger form to visually compare it to the code and see exactly what is getting parsed.

I’m having a difficult time visually (in my mind) separating three elements:

  1. When the code is reference to the html on the given form.
  2. When the code is referencing js or css
  3. What code is being pulled.

Thanks as always for your time,
RJ

Hi all, something written in the review is giving me some doubts: " Setting type to "list" will pair the <input> with a <datalist> element if the id of both are the same."

However:

  1. we haven’t seen type="list" but rather list as an attribute itself (ie. list="sauces")
  2. the elements <input> and <datalist> don’t have matching id values in the exercises. Instead, the value for input’s list matches the value for datalist’s id

Here’s the example from the exercise:

<label for="sauce">What type of sauce would you like?</label>
  <input list="sauces" id="sauce" name="sauce">
          <datalist id="sauces">
            <option value="ketchup"></option>
</datalist>

So am I misunderstanding the review’s summary, or missing something somewhere?

1 Like

<datalist>: The HTML Data List element - HTML: HyperText Markup Language | MDN

All global attributes are permitted. What this says of the type attribute one cannot say, but we definitely do see that the list attribute applies and will have the same value as the id attribute of the datalist element.

Note that since there is no text rendered to the screen, meaning no text node within the option element, the endtag can be omitted.

This is not rather a question. It’s more for the people that challenged themselves in Lecture 14 of the HTML course: HTML forms.

I don’t know how to open a topic where I simply try to help w/o asking a question.
Here’s a video that could help you with the placeholder attribute. I liked it a lot and find it super useful for good UX.

I hope it helps: https://www.tutorialspoint.com/How-to-use-placeholder-attribute-in-HTML.
Happy coding! :stuck_out_tongue:

This isn’t a question but rather an observation,
why did you (codecademy) complete more than half of the coding??? I would have liked to have been tought how/where/why/how all of the tags were needed/used so that I could have learned a bit better how to do this stuff on my own…
Edit it please so we learn better. Cause I saw a lot of questions about the section tags and stuff that was never taught…
thaaaankss

1 Like

Even though they can achieve the same result (with a bit of CSS), they have different semantics.

<h1> - <h6> should only be used for headings. If you use them for anything other than headings, this can confuse screen readers, search engines, web crawlers, etc.

The <p> element should only be used for a block of text (or a paragraph). It should not be used as a label of some sort as it can, again, confuse screen readers, search engines, web crawlers, etc.

The <span> element is like the inline version of the <div> element. It should contain small pieces of content that you might want to style differently than other pieces of content. The <span> element should not be used as a replacement for the <label> element.

Confusing screen readers will worsen the screen reading experience for the visually impaired.

Confusing search engines can mess with the ranking of your web page, as the search engine doesn’t actually understand the content it’s displaying.

Hi there. Quick question for you guys:
At the end of the last exercise in the HTML Forms section, they suggest that, to challenge ourselves, we try making our own form. Where do we go about doing this? On the same workspace page but down lower, perhaps? Or is there a way to open a new window to begin writing my own new code?

Thanks.

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!