Product Landing Page Email Submit

HTML-CSS
1

OK, so I have been tinkering , reading… poking around and I still am not quite sure why this does not pass their test…

Here is the form code :

Enter your email address below to keep up to date with the latest happenings at Chez Banschbach ! 

     <p><input id="submit" type="submit" value="Submit" > </p>        
                                                     
  </form>

Any ideas why this wont fly ? Thank you in advance !

3

Which ones?

Is this the complete code? If not ( as I guess since the opening <form> tag is missing) can you post it all? Are you asked to write some javascript too?

4

Here is the link to the Pen…

no , no java script… just the HTML and CSS… vanilla etc…

Thank you for the reply !

P.S. It does not pass the email submit test apparently :sa:

1 Like
5

Try adding a name attribute to the email input field:

name=“email”

The name is needed to reference form data after it is submitted.

2 Likes
6

Thank you , I tested that and it works… /passed, but, would you mind explaining the mechanics of that for me… I don’t quite get what its purpose is etc. Like not all forms need a “name” field ? or is the Name field there as a key pair for the email field, and more “names” would be needed in a multi-input form etc >

#teachItToMeLikeIm5 LOL

Thanks !

7

From W3School - HTML input name attribute

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.

From MDN - FormData():

Note: All input elements have a ‘name’ attribute. It is necessary to be able to access their values later.

In short, when you submit a form the default way of passing the data is through the FormData Api, which
creates a key-value pair using the name attribute of the field and the value of the field itself ^^
If the field has no name I guess it doesn’t build the key-value pair (I’m not sure if it doesn’t even check the value of a field without a name or if it can’t retrieve the value once inserted ^^ )

1 Like
8

OK so, the api uses the name as sort of like an array label… {form-name := email: "johnjacob@Jinglehiemerschmidt.com"

That would make sense…