Skip to content

Develop #795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kacper-Leman wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Develop #795

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
80845d9
readme.md
Kacper-Leman May 19, 2023
f9d7dcc
./src
Kacper-Leman May 19, 2023
2ab53c4
./src
Kacper-Leman May 19, 2023
824f62c
./src
Kacper-Leman May 22, 2023
2687a6b
./src
Kacper-Leman May 22, 2023
f1ece48
Make fixes
Kacper-Leman May 23, 2023
19ec1cd
Fix indentations
Kacper-Leman May 23, 2023
236588a
Few more fixes with spacelines and formating
Kacper-Leman May 23, 2023
91ab245
delete unnecessary class
Kacper-Leman May 23, 2023
b596522
Fixes for perfection
Kacper-Leman May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion .linthtmlrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,49 @@
{
"extends": "@mate-academy/linthtml-config"
"attr-bans": [
"align",
"background",
"bgcolor",
"border",
"frameborder",
"style"
],
"attr-name-ignore-regex": "viewBox",
"attr-no-dup": true,
"attr-quote-style": "double",
"attr-req-value": true,
"class-no-dup": true,
"doctype-first": true,
"doctype-html5": true,
"fig-req-figcaption": true,
"head-req-title": true,
"html-req-lang": true,
"id-class-style": false,
"id-no-dup": true,
"img-req-src": true,
"img-req-alt": "allownull",
"indent-width": 2,
"indent-style": "spaces",
"indent-width-cont": true,
"input-radio-req-name": true,
"spec-char-escape": true,
"tag-bans": [
"b",
"i",
"u",
"center",
"style",
"marquee",
"font",
"s"
],
"tag-name-lowercase": true,
"tag-name-match": true,
"tag-self-close": "never",
"tag-close": true,
"text-ignore-regex": "&",
"title-no-dup": true,
"line-end-style": "lf",
"attr-new-line": 2,
"attr-name-style": "dash",
"attr-no-unsafe-char": true
}
6 changes: 3 additions & 3 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# HTML form
Replace `<your_account>` with your Github username and copy the links to Pull Request description:
- [DEMO LINK](https://<your_account>.github.io/layout_html-form/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_html-form/report/html_report/)
- [DEMO LINK](https://Kacper-Leman.github.io/layout_html-form/)
- [TEST REPORT LINK](https://Kacper-Leman.github.io/layout_html-form/report/html_report/)

> Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/#how-to-solve-the-layout-tasks-on-github)
___
Expand Down Expand Up @@ -40,7 +40,7 @@ Create HTML page with form. On form submit send form data to `https://mate-acade
- Age should be at least `1` and at max `100` with a default value of `12`
- The email field should have placeholder value: `email@example.com`.
- Text fields should have `autocomplete="off"`.
- `Submit` button should have a `type="submit"`
- `Submit` button should have a `type="submit"`
- Vertical distance between inputs should be `10px`
- Vertical distance between groups should be `20px`
- Any other styles should be browser default
Expand Down
209 changes: 208 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,214 @@
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>HTML Form</h1>
<form action="https://mate-academy-form-lesson.herokuapp.com/create-application" class="form">
<fieldset>
<legend>Personal information</legend>
<div>
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be consistant and add class to all form fields wrappers. You can then specify the margins using pseudo selectors in css

Copy link
Copy Markdown
Author

@Kacper-Leman Kacper-Leman May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All tips done I hope now its good.

<label for="surname">Surnmae: </label>

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

<div class="form-field">
<label for="name">Name: </label>

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

<div class="form-field">
<label for="age">How old are You?</label>

<input
type="number"
name="age"
id="age"
autocomplete="off"
value="12"
min="1"
max="100"
required
>
</div>

<div class="form-field">
<label for="date-birth">Full date of birth: </label>

<input
type="date"
name="date-birth"
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Name attibute should be camelCase

Suggested change
name="date-birth"
name="dateBirth"

id="date-birth"
autocomplete="off"
>
</div>

<div class="form-field">
<label for="agreement">I accept the term of the agreement </label>

<input
type="checkbox"
name="agreement"
id="agreement"
autocomplete="off"
required
>
</div>
</fieldset>



Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only one line space between siblings is needed

<fieldset class="fieldset">
<legend>Registration</legend>
<div>
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add empty line - double check if there are empty lines between siblings elements, do not add empty lines between parent and child

<label for="email">E-mail: </label>

<input
type="email"
name="email"
id="email"
autocomplete="off"
placeholder="email@example.com"
required
>
</div>

<div class="form-field">
<label for="password">Password: </label>

<input
type="password"
name="password"
id="password"
autocomplete="off"
required
minlength="5"
maxlength="10"
>
</div>
</fieldset>



Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

<fieldset class="fieldset">
<legend>An interesting fact about you!</legend>
<div>
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add empty line between siblings

<label for="yes">Do you love cats?</label>

<input
type="radio"
name="choice"
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets make this name more descriptive so it is easier to use (in scenartio when form is being send)

Suggested change
name="choice"
name="lovesCats"

id="yes"
autocomplete="off"
value="Yes"
>

<label for="yes">Yes</label>

<input type="radio"
name="choice"
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Suggested change
name="choice"
name="lovesCats"

id="no"
autocomplete="off"
value="No"
>

<label for="no">No</label>
</div>

<div class="form-field">
<label for="colour">What is your favorite color?</label>

<input
type="color"
name="colour"
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix typo

Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be

Suggested change
name="colour"
name="color"

id="colour"
autocomplete="off"
>
</div>

<div class="form-field">
<label for="time">What time do you go to bed?</label>

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

<div class="form-field">
<label for="cars">What are your favorite brand of cars?</label>

<select
name="cars"
id="cars"
autocomplete="off"
multiple
>

Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove line between parent and child tag

Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove space

<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
<option value="Lada">Lada</option>
</select>
</div>

<div class="form-field">
<label for="rating">How do you rate our work?</label>

<input
type="range"
name="rating"
id="rating"
value="0"
autocomplete="off"
>
</div>
</fieldset>



<fieldset class="fieldset">
<legend>Additional info:</legend>

<div>
<label for="comment">Comments: </label>

<textarea
name="comment"
id="comment"
cols="20"
rows="2"
autocomplete="off">
</textarea>
Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image Fix formatting

</div>

<div class="form-field">
<label for="recommend">Would you recommend us?</label>

<select
name="recommend"
id="recommend"
autocomplete="off">

Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix formatting

Suggested change
<select
name="recommend"
id="recommend"
autocomplete="off">
<select
name="recommend"
id="recommend"
autocomplete="off"
>

Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove space

<option value="Yes">yes</option>
<option value="no">no</option>
</select>
</div>
</fieldset>


Copy link
Copy Markdown

@DorotaLeniecDev DorotaLeniecDev May 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove one space

<button type="submit"class="button">Submit</button>
</form>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
13 changes: 12 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
/* styles go here */

.form-field {
margin: 10px 0 0;
}

.fieldset {
margin-top: 20px;
}

.button {
margin-top: 20px;
}