add task solution by aRabiej · Pull Request #801 · mate-academy/layout_html-form

aRabiej · 2023-06-15T19:57:07Z

Radoslaw-Czerniawski

There is no link with demo

aRabiej · 2023-06-18T17:45:27Z

should be visible now

DorotaLeniecDev

Check this checklist https://github.com/mate-academy/layout_html-form/blob/master/checklist.md, you need to fix:

Formatting, make sure the indentation is correct, also add empty lines between sibling elements like in this example:

        <div class="field_wrapper">
          <label for="surname">Surname: </label>

          <input
            type="text"
            name="surname"
            id="surname"
            autocomplete="off"
          >
        </div>

Also avoid stylin by using element selector, add class to the element and style it using class like:
html file:

        <div class="field_wrapper">
          <label for="surname">Surname: </label>

          <input
            type="text"
            name="surname"
            id="surname"
            autocomplete="off"
          >
        </div>

css file:

.field_wrapper {
  margin-bottom: 10px
}

Add proper labels to all inputs so when the user clicks label it will focus on the proper input (for-id relation):

          <label for="name">Name: </label>

          <input
            type="text"
            name="name"
            id="name"
            autocomplete="off"
          >

darokrk

The code needs some improvements :)

Please look at Radek's mention before the link with the demo is still missing.

darokrk · 2023-06-29T05:37:31Z

src/index.html

+            type="date"
+            name="date"
+            id="date"
+            value=" "


Empty space as a default value in input is not a good practice. Please remove this attribute value=" " it's redundant here

darokrk · 2023-06-29T05:37:31Z

src/index.html

+            type="text"
+            name="name"
+            id="name"
+            value=" "


Empty space as a default value in input is not a good practice. Please remove this attribute value=" " it's redundant here

darokrk · 2023-06-29T05:37:31Z

src/index.html

+            type="text"
+            name="surname"
+            id="surname"
+            value=" "


Empty space as a default value in input is not a good practice. Please remove this attribute value=" " it's redundant here

darokrk · 2023-06-29T05:37:31Z

src/index.html

+            type="email"
+            name="email"
+            id="email"
+            value=" "


Empty space as a default value in input is not a good practice. Please remove this attribute value=" " it's redundant here

darokrk · 2023-06-29T05:37:31Z

src/index.html

+          <input
+            type="color"
+            name="color"
+            value=" "


Empty space as a default value in input is not a good practice. Please remove this attribute value=" " it's redundant here

darokrk · 2023-06-29T05:37:31Z

src/index.html

+            name="time"
+            id="time"
+            step="2"
+            value=" "


Empty space as a default value in input is not a good practice. Please remove this attribute value=" " it's redundant here

darokrk · 2023-06-29T05:43:32Z

src/style.css

-}
-
-input {
+.field_wrapper {


following the BEM naming convention this name should have double underscore mark field__wrapper

darokrk · 2023-06-29T05:43:50Z

src/style.css

-
-label {
-  margin-top: 10px;
+.box_style {


following the BEM naming convention this name should have double underscore mark box__style

DorotaLeniecDev

Few more correction needed, check my comments

DorotaLeniecDev · 2023-06-30T09:05:08Z

src/index.html

+            name="email"
+            id="email"
+            placeholder="email@example.com"
+            multiple


You can use multiple attribute with input type email, but I think that in this case more suitable would be to add multiple attribute to select tag, as this is registration form so we are allowing one email value :)

DorotaLeniecDev · 2023-06-30T09:06:34Z

src/index.html

+        <label for="user-password">Password: </label>
+
+        <input
+          name="user-password"


Value of name attribute should be in camelCase like userPassword

DorotaLeniecDev · 2023-06-30T09:06:49Z

src/index.html

+          name="user-password"
+          id="user-password"
+          type="password"
+          required autocomplete="off"


Fix formatting:

Suggested change

required autocomplete="off"

required

autocomplete="off"

DorotaLeniecDev · 2023-06-30T09:08:54Z

src/index.html

+          <input
+            type="color"
+            name="color"
+          >


Label for this field is not clickable(when clicking label it should focuse on the input).
Add id which coresponds with for attribute in label

Suggested change

<input

type="color"

name="color"

>

<input

type="color"

name="color"

id="color"

>

DorotaLeniecDev · 2023-06-30T09:12:32Z

src/index.html

+          <textarea
+            name="cars"
+            id="cars"
+            rows="4"
+            cols="2"
+          >BMW Audi Lada
+          </textarea>


Here more suitable would be to use select tag instead of textarea
Here is an example:

<select name="cars" id="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

This will also fix your test results :)

DorotaLeniecDev · 2023-06-30T09:14:35Z

src/index.html

+        <div class="field__wrapper">
+          <label for="comment">Comments: </label>
+
+          <textarea


DorotaLeniecDev · 2023-06-30T09:15:45Z

src/index.html

+            name="comment"
+            rows="2"
+            cols="20"
+          >
+          </textarea>


<textarea> is a tricky tag to format:
It requires you to put a closing tag on the same line as the > of the opening tag, not to have default content, and be able to see the placeholder.
At the same time, if it has several attributes, you need to put each of them on its own line.
So, use the following formatting where > is moved 1 position left from the normal alignment:

<textarea class="..." placeholder="..." ></textarea>

DorotaLeniecDev · 2023-06-30T09:16:27Z

src/index.html

+        <label for="reco">Would you recommend us?</label>
+        <select id="reco" name="reco">


Add empty line between sibling elements

DorotaLeniecDev · 2023-06-30T09:16:56Z

src/index.html

+        <label for="reco">Would you recommend us?</label>
+        <select id="reco" name="reco">


Use more descriptive name and id value like recommendation

DorotaLeniecDev · 2023-06-30T09:17:25Z

src/index.html

+      </fieldset>
+      <button type="submit">Submit</button>


Add empty line between sibling elements

Suggested change

</fieldset>

<button type="submit">Submit</button>

</fieldset>

<button type="submit">Submit</button>

Radoslaw-Czerniawski

Some minor errors, correct them and we'r good :D

Radoslaw-Czerniawski · 2023-06-30T18:08:18Z

src/index.html

-    <h1>HTML Form</h1>
+    <form
+      action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+      method="get"


Method here should be POST rather than GET -> https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

Radoslaw-Czerniawski · 2023-06-30T18:19:13Z

src/index.html

+            type="radio"
+            id="yes"
+            name="cat"
+            value="Y"


This value is very vague, it would be better here to reflect what is checked at the input -> Yes and below No

DorotaLeniecDev

Good job :)

add task solution

6e63de7

Radoslaw-Czerniawski suggested changes Jun 18, 2023

View reviewed changes

links should be visible

444f258

aRabiej requested a review from Radoslaw-Czerniawski June 18, 2023 17:45

DorotaLeniecDev suggested changes Jun 19, 2023

View reviewed changes

'added corrections'

e3ccaf8

aRabiej requested a review from DorotaLeniecDev June 28, 2023 18:48

darokrk suggested changes Jun 29, 2023

View reviewed changes

made more adjustments, trying to update readme, so it contains demo link

8899675

aRabiej requested a review from darokrk June 29, 2023 16:33

DorotaLeniecDev suggested changes Jun 30, 2023

View reviewed changes

formatting fixes, added some forgotten IDs

caf1045

aRabiej requested a review from DorotaLeniecDev June 30, 2023 13:55

Radoslaw-Czerniawski suggested changes Jun 30, 2023

View reviewed changes

added the minor changes!

9b7bd56

aRabiej requested a review from Radoslaw-Czerniawski June 30, 2023 18:27

DorotaLeniecDev approved these changes Jul 3, 2023

View reviewed changes

		<label for="reco">Would you recommend us?</label>
		<select id="reco" name="reco">

Conversation

aRabiej commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Radoslaw-Czerniawski left a comment

Choose a reason for hiding this comment

Uh oh!

aRabiej commented Jun 18, 2023

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

darokrk left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Radoslaw-Czerniawski left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aRabiej commented Jun 15, 2023 •

edited

Loading