Need Feedback on form project!

Hey guys,

I am just looking for some feedback on this little form project :slight_smile: any advice or suggestions will be appreciated!

Thanks
Shannon

Off the top and without scanning any further, consider…

The <title/> cannot be styled which also means no font specified. Therefore, it does not need to follow the two links above it in your current listing. One suspects readers and maybe even search engines would prefer it just under the character set declaration. (1) (I like how you wrote the first four lines; great compliance.)

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Movie Survey</title>
<!-- ... 

although since the default read direction of HTML is left to right, the dir attribute is moot. It is more than inferred by the language declaration, 'en' which we know to be English.

Strictly an aside, worth mentioning. Off to finish reading your markup. BRB


1. Why ‘under …’? Because the title text node may well contain special characters outside of the normal ASCII range

Hello,

Thanks so much for you feedback and explanations so far. Looking forward to hearing more once you have finished looking at it :slight_smile:

1 Like

I lost my connection and have to get with it, again. Please bear with me.


Another thing springs forth…

<section id="main">

Semantic HTML not only includes <section/>, but, <main/> as well. to relieve us of this identification nuance.


Bouncing around…

<footer>
   <p class="copyright">&copy; Shannon Kelly,2020</p>
 </footer>

The fact that it is in a specific container renders the class distinction rather moot, one suspects. And copyright always has the year before the owner.

copyright 2020 Wee Gillis

CSS

footer p {
  /* whatever styles were given to 'copyright' */
  text-align: center;
  font-size: smaller;
}

The purpose of semantic HTML is not only better discernment by user agents and assistive technology, but also easier generic traversal of the document. It relieves us in so many cases of having to dab the document with classes and ids. Unfortunately, it is not a witnessed approach in most education environments. This dependence on classes and ids is overshadowing the elegance of traversal approaches. It behooves the learner to explore and understand its pertinence and value in every day style sheets.


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

Two things here that stir me,

  1. No quotes on the id attribute value; and,
  2. the presence of that attribute, at all.

We can identify that element by its type attribute. An id is not needed.

input[type="submit"]

Mostly rambling at this point. So be it. Will return.


Same thing goes, here…

<textarea id="suggestions" name="suggestions" rows="8" cols="40"class="box-size"placeholder="Anything else?..." ></textarea>

There is only one <textarea/> in the entire form, so it is definitely an easy grab. Again, no id attribute needed to style this element.

Since you have a box-size class, are width and height attributes necessary? I also stumbled across the missing white space after the cols attribute and the class attribute.

Again, all this can be done without class or id, including box-size.

Walk-back: rows and cols are suitable fallbacks if CSS does not load, but then the layout would be broken anyway. The browser has defaults for these two properties. It means they have no real importance.

Hey,

This is awesome feedback! Just checking my understanding I can take out the footer p as I have footer copyright? and some of the IDs can come out as we can identify them by type attribute?

Thanks

1 Like

Slowly… We’re not looking for shortcuts, here. Just ways that we can make the style sheet follow more of a traversal model than a class/id model. Thought and deliberation are in high demand for this process. We’re not talking a silver bullet. Just another approach, is all.


My suggestion is that the class can be removed since the generic type grouping is so identifiable in its present state…

footer p {}

as is,

input[type="submit"]

Bottom line, before assigning a class or id as a means to hook this element, look first to its inheritance path and/or type and/or attributes. They will in most cases suffice to fill the need for suitable selectors. This is a viable skill that should not be discounted.

Ok Thank you, As this is one of my first projects this feedback is valuable. I use your suggestions and update my project.

Thanks again :slight_smile:

1 Like

You’re welcome. Just had a system reboot so back to square one on perusing your markup. One might expect more comments, presently.


It is all well and good that I might find more things to pick at but one would hope you will discern by now that a modicum of critical oversight is what is needed when creating a web document, whether form or otherwise. Because HTML is so forgiving, many completely gloss over the usability aspects, and fail to even consider accessibility.

We are writing declarative documents that render to our specifications. Looking to a user agent to perform that task for us is out of the question. It’s on us to do that.

Look to the semantic elements that forms have built in. Every one of them were forged in the working group fires of decades ago. Dig into W3C documentation and come out the other end a wiser developer, guaranteed. I may not be capable of teaching this stuff at that level. You, on the other hand, may well be capable of capturing their vision and objective. Give it a go and keep us posted, eh?