Испытание 18/18

Курсы §6. Формы, часть 1
1

Добрый день, друзья!
Я немного запутался с предназначением тега “<label>”. Если Вам не сложно, могли бы Вы глянуть на мой код и сказать не наставил ли я лишних лэйблов и атрибутов в нем. Спасибо.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Испытание: редактирование профиля</title>
	</head>
	<body>
		<h1>Профиль</h1>
		<form action="https://echo.htmlacademy.ru" method="post" enctype="multipart/form-data">
			<label for="male-female">Ваш пол:
				<input type="radio" value="male" name="your-gender" id="male-female"> Мужской
				<input type="radio" value="female" name="your-gender" id="male-female" checked> Женский
			</label>
			<br>
			<label for="birthday">Месяц и год рождения:<br>
				<select name="month" id="birthday">
					<option value="jan">Январь</option>
				</select>
				<select name="year" id="birthday">
					<option value="1990">1990</option>
				</select>
			</label>
			<br>
			<label for="frontend-lan">Знакомые технологии:<br>
				<select size="4" multiple name="frontend" id="frontend-lan">
					<option value="html">HTML</option>
					<option value="css" selected>CSS</option>
					<option value="javascript">JavaScript</option>
					<option value="nodejs">Node.js</option>
				</select>
			</label>
			<br>
			<label for="choose-foto">Фото:
				<input type="file" id="choose-foto">
			</label><br>
			<input type="submit" value="Сохранить">
		</form>
	</body>
</html>
2

Оформите код правильно, пожалуйста.

3

Исправил)

4

Нет, так совсем неправильно. Не может быть два одинаковых идентификатора в пределах одной страницы. В данном случае подписями к полям будут слова “Мужской” и “Женский”. У каждого поля свой идентификатор и своя подпись.
“Ваш пол:” - это может быть просто span или label, но без привязки к полю:
<label>Ваш пол:</label>

Дальше по коду есть еще одна такая же ошибка.
И помните, если вы связываете поле с подписью по id, то поле в подпись оборачивать уже не надо:

<label for="choose-foto">Фото:</label>
<input type="file" id="choose-foto">
1 лайк
5

Да, я идентификатором я напутал, но имя же у переключателей одной группы должно быть одно, верно?
“Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью “value”.”

Я так понял, что здесь:

просто не нужно было указывать айди, т.к. и так все переключатели обернуты в лэйбл.
Получается нужно было делать заголовок “Ваш пол” спаном или отдельным лэйблом (как вы написали) и еще поотдельности обернуть в лэйбл “Мужской” и “Женский” и вот как раз их и привязывать?

<label>Ваш пол:</label>
<input type="radio" value="male" name="your-gender" id="choose-male"> 
<label for="choose-male">Мужской</label>
<input type="radio" value="female" name="your-gender" checked id="choose-female">
<label for="choose-female">Женский</label>
6

функция label: тыкнул в label - попал в input, то бишь увеличение области клика и удобства пользователя. На примере выбора пола можно сделать два варианта:

  1. просто оборачиваем:

    Мужской
    Женский

  2. с привязкой по id - как вы и сделали:

    Мужской Женский
7

А если сделать лейблом фразу “Ваш пол” - то куда, после клика по ней должен попасть пользователь? В женский или в мужской? А может никуда - и это просто заголовок, описание следующего ниже переключателя, чтобы пользователь понимал, к чему именно относится выбор? По-моему, последний вариант логичней :slight_smile:

8

Вообще это <legend>, заголовок не подходит, потому что появятся отступы сверху и снизу.

9

Спасибо!
А в случае с селектом такая же ситуация получается?

<label for="birthday">Месяц и год рождения:<br>
  <select name="month" id="birthday">
    <option value="jan">Январь</option>
  </select>
  <select name="year" id="birthday">
    <option value="1990">1990</option>
  </select>
</label>
  1. “Месяц и год рождения” оборачиваем в отдельный лэйбл или спан
  2. Убираем одинаковые айди у опшинов
  3. …Сначала думал, что опшины оборачиваем в лэйбл, но кажется что просто без них верно?
10

я употребила здесь заголовок не в смысле h1-h6, а как заглавие, краткое описание, суть и т.п… но даже если это сделать именно тегом заголовка - то отступы можно обнулить, а толщину шрифта - обнормалить, тьфу, сделать normal :slight_smile:

11

Я знаю, но в контексте задания редактирование CSS не подходит. Чисто семантически это больше <legend>, чем что-то другое.

12

Первые два пункта правильно.

14

Добрый день, у меня получилось только 90%. Образец с результатом немного съезжают. Подскажите, что не так, пожалуйста.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: редактирование профиля</title>
    </head>
    <body>
        <h1>Профиль</h1>

        <form action="https://echo.htmlacademy.ru" method="post">
            <label>
            Ваш пол:
            <input type="radio" value="Мужской" name="1">Мужской
            <input type="radio" value="Женский" name="1"checked>Женский
           <br>Месяц и год рождения:
           <br><select name="month">
           <option>Январь</option></select>
           <select name="years">
           <option>1990</option></select>
           <br>Знакомые технологии:
           <br><select name="1" multiple size="4">
           <option>HTML</option>
           <option>CSS</option>
           <option>JavaScript</option>
           <option>Node.js</option></select> 
           <br>Фото:<input type="submit" value="Choose File"> No file selected
           <br><input type="submit" value="Сохранить"> 
           </label>
        </form>
    </body>
</html>

image.png1440×900 218 KB

15

Там где радио бокс с выбором пола, нужно поставить пробел перед словом “Мужской” и перед словом “Женский”, такая же ситуация с выбором файла внизу, после слова “Фото:” тоже нужен пробел.