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
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?
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.
Great, thanks for the support on it!
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:
- When the code is reference to the html on the given form.
- When the code is referencing js or css
- 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:
- we haven’t seen
type="list"
but ratherlist
as an attribute itself (ie.list="sauces"
) - the elements
<input>
and<datalist>
don’t have matchingid
values in the exercises. Instead, the value for input’slist
matches the value for datalist’sid
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?
<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!
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
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
typeto
“list”will pair the
with a
element if the
idof 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.
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!