Skip to content

Develop #796

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
natispatis wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Develop #796

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cad01e9
add task solution
natispatis May 30, 2023
918d205
add task solution
natispatis May 30, 2023
450836c
add task solution
natispatis Jun 1, 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
4 changes: 2 additions & 2 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://<natispatis>.github.io/layout_html-form/)
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

Think here you should remove brackets <> otherwise links will not work correctly, same for testing

- [TEST REPORT LINK](https://<natispatis>.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
117 changes: 116 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,122 @@
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>HTML Form</h1>
<script type="text/javascript" src="./main.js"></script>
<form>
<fieldset class="form__fieldset form-fieldset">
<legend class="form-fieldset__title">Personal information</legend>
<div class="field">
<label for="surname">Surname: </label>
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

"Every field should have label, which focuses input on label click", your labels after click not focusing inputs.
Please add an id with the same value as you have in label for attribute and then it should work :)
Do that for the rest form elements also.

<input type="text"
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

Add an 'id' attribute with the value 'surname' to match the 'for' attribute of the label.

name="surname"
required
>
</div>
<div class="field">
<label for="name">Name: </label>
<input type="text"
name="firstname"
minlength="25"
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

The 'minlength' attribute value should be reasonable, reduce it to a smaller value (e.g. 2). we dont need that long name value here

>
</div>
<div class="field">
<label for="age">How old are you? </label>
<input type="number"
name="age"
min="0"
max="100"
value="12"
>
</div>
<div class="field">
<label for="birth">Full date of birth: </label>
<input type="date" name="birth">
</div>
<div class="field">
I accept the term of agreement
<input type="checkbox" name="term">
</div>
</fieldset>
<fieldset class="form__fieldset">
<legend class="form-fieldset__title">Registration</legend>
<div class="field">
<label for="surname">E-mail: </label>
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

Add an 'id' attribute with the value 'email' to match the 'for' attribute of the label.

<input type="email"
name="email"
placeholder="email@example.com"
>
</div>
<div class="field">
<label for="name">Password: </label>
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

Add an 'id' attribute with the value 'password' to match the 'for' attribute of the label.

<input type="password"
name="password"
minlength="10"
>
</div>
</fieldset>
<fieldset class="form__fieldset form-fieldset">
<legend class="form-fieldset__title">An interesting fact about you!</legend>
<div class="field">
<label for="surname">Do you love cats? </label>
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

it's not a surname, think this should be rather cats, names of the inputs below also should be changed :)

<input type="radio"
name="yes"
value="yes"
>
Yes
</input>
<input type="radio"
name="no"
value="no"
>
No
</input>
</div>
<div class="field">
<label for="name">What is your favorite color?</label>
<input type="color" name="color">
</div>
<div class="field">
<label for="name">What time do you go to bed?</label>
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

Think it's not a label for name, please correct labels for tags in whole file to points correct inputs :)

<input type="time"
name="hour"
step="1"
>
</div>
<div class="field">
<label for="name">What are your favorite brand of cars?</label>
<select name="car" multiple>
<option value="BMW">BMW</option>
<option value="AUDI">AUDI</option>
<option value="Lada">Lada</option>
</select>
</div>
<div class="field">
<label for="name">How do you rate our work?</label>
<input type="range"
name="rate"
value="0"
>
</div>
</fieldset>
<fieldset class="form__fieldset form-fieldset">
<legend class="form-fieldset__title">Additional info: </legend>
<div class="field">
<label for="surname">Comments: </label>
<textarea type="text"
name="comments"
autocomplete="off"
>
</textarea>
</div>
<div class="field">
<label for="name">Would you recommend us?</label>
<select>
<option>Yes</option>
<option>No</option>
</select>
</div>
</fieldset>
</form>
<button type="submit">Submit</button>
Copy link

@darokrk darokrk May 31, 2023

Choose a reason for hiding this comment

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

Move button inside form to make it functional

</body>
</html>
7 changes: 7 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
/* styles go here */
.form__fieldset {
margin-bottom: 20px;
}

.field:not(:last-child) {
margin-bottom: 10px;
}