Добро пожаловать обратно во второй раздел серии Hello. На этой неделе мы собираемся сделать немного более захватывающим, потому что нам нужно получить немного больше. Если вы готовы, давайте начнем с.
На основе веб-форм HTML, поэтому Интернет собирает информацию, которую вводит пользователь. Существуют различные способы использования веб-форм, например, чтобы попросить веб-сайт войти в систему пользователя. Для этого у нас есть веб-форма. Эта веб-форма может хранить такие вещи, как адрес электронной почты и пароль пользователя, а затем входить в систему.
Мы можем видеть тег входа прямо здесь. Это вход пользователя, и здесь мы можем видеть тип. Значение тега, который является типом атрибута, позволяет пользователю вводить и редактировать адрес электронной почты. Есть много разных типов записей, и мы будем много говорить о них на этой неделе.
Я вычистил части, о которых упоминал в первой главе, и давайте начнем с чистого листа и новой недели.
<!DOCTYPE html>
<head>
<title>Learning</title>
</head>
<body>
<h1> HTML-CSS Learning </h1>
<form>
<input type="text" id="username">
</form>
</body>
</html>
Поля ввода текста определяются как «текст». Это больше данных, которые мы ожидаем от пользователя. Мы хотим, чтобы пользователь предоставил случайный тип текста. Два элемента на этой странице не могут иметь одинаковый идентификатор, поэтому давайте посмотрим, как он будет выглядеть, если он есть у этого пользователя.
Для добавления взаимодействия в это поле мы можем использовать JavaScript. В качестве примера мы хотели бы добавить тег в поле ввода. Пользователь не знает, что писать в поле ввода. В это поле ввода мы добавляем тег, объясняющий, что должен делать пользователь.
<form>
<label for="username">Enter username: </label>
<input type="text" id="username">
</form>
В разделе for он спрашивает нас, что это за входная зона. Здесь мы делаем то, что показываем идентификатор поля ввода для этого имени пользователя. Мы связываем этот тег с полем ввода.
Примечание. Если вы хотите связать тег с полем ввода, используйте идентификатор ID.
Теперь давайте рассмотрим различные типы записей.
Сначала создадим метку, а затем поле ввода.
<label for="email">Enter email: </label> <input type="email" id="email">
Мы хотим, чтобы данные от пользователя были электронной почтой, поэтому мы указали тип электронной почты в поле типа. Когда пользователь вводит текст, нам не нужно проверять, является ли это электронным письмом. Поэтому мы использовали тип: Электронная почта.
Теперь давайте настроим поле кода.
<label for="password">password </label> <input type="password" id="password">
Давайте добавим еще одно поле имени, чтобы определить эти части. У них будут эти значения здесь, если они понадобятся им в будущем для PHP или бэкенда. Вот почему я буду называть его пользователем.
<form>
<label for="username">Enter username: </label>
<input type="text" id="username" name="username">
<label for="email">Enter email: </label>
<input type="email" id="email" name="email">
<label for="password">password </label>
<input type="password" id="password" name="password">
</form>
Эта группировка играет важную роль в HTML-формах и должна быть сгруппирована в разных частях формы. Мы поймем это лучше в примерах радиокнопок.
<form action="">
<input type="radio" name="gender" value="Male"> Male <br>
<input type="radio" name="gender" value="Female"> Female <br>
<input type="radio" name="gender" value="Other">
<p><b>Note:</b> Bir kullanıcı bir radyo düğmesine tıkladığında, bu işaretli hale gelir ve aynı ada
sahip diğer tüm rado düğmelerinin işareti kaldırılır.</p>
</form>
У нас есть 3 переключателя, все они с функцией имени, все из которых зависят от пола. В любом случае мы можем выбрать пол. Эта группа объединяет все радиокнопки. Поля с таким названием позволяют нам выбрать этот пол. Если значение этих переключателей изменит группу кнопки «другое» («имя»), это будет выглядеть следующим образом
‹тип ввода=”радио” имя=”пол2 значение=”Другое”›
Даже если мы обозначим ее как единую группу, это не изменит ситуацию, потому что это отдельная группа. Поскольку пол2 больше не связан с гендерной группой, они не имеют одинакового имени. Это очень важно, когда речь идет о такой группировке различных записей.
Давайте все вместе добавим некоторые переключатели в наш код после этого примера.
<p>Select your age : </p>
<input type="radio" name="age" value="0-25" id="option-1 ">
<label for="option-1 ">0-25</label>
<input type="radio" name="age" value="0-25" id="option-2 ">
<label for="option-2 ">26-50</label>
<input type="radio" name="age" value="0-25" id="option-3 ">
<label for="option-3 ">51+</label>
давайте спросим возраст пользователя в абзаце и создадим переключатели. В этом случае значение является фактическим значением, которое будет обрабатываться только сервером и может быть просмотрено только пользователем.
Мы можем видеть 3 варианта, и если мы нажмем другую кнопку после выбора, она удалит кнопку, которую мы выбрали первой, и выберет последнее нажатое значение. Раздел «имя» выполняет всю эту группировку.
Сначала можно покрыть все это в одном контейнере, что немного сложно, но потом вы лучше поймете, зачем мы это используем. Таким образом, другим типом поля формы является раскрывающаяся форма, также известная как раскрывающееся меню.
Это позволяет пользователю щелкнуть и выбрать. Давайте посмотрим, как мы можем это создать. По функциональности они очень похожи на радиокнопки. Мы выбираем только 1 из нескольких значений. Радио немного более организовано, чем кнопка. Давайте начнем
<label for="question">Security Question </label>
<select name="question" id="question">
<option value="q1">What colour are your favourite pair of socks?</option>
</select>
Каждый такой вариант будет чего-то стоить. Так же, как у нас есть ценность для каждого шоу. Это первый вопрос, который мы задаем, если мы сейчас посмотрим на наш сканер, он будет выглядеть так.
Давайте добавим немного больше опций и сделаем его Q2 и Q3.
<select name="question" id="question">
<option value="q1">What colour are your favourite pair of socks?</option>
<option value="q2">If you could be a vegetable , what it be ? </option>
<option value="q3">What is your best ever security question?</option>
</select>
Форма вопросов и ответов также должна иметь текстовое поле, которое будет вводить пользователь, поэтому давайте добавим еще одно обычное текстовое поле.
<label for="answer">Security question answer: </label> <input type="text" id="answer" name="answer">
Это будет выглядеть так. А теперь позвольте мне показать вам еще одну экскурсию по форме. «Текстовое поле»
Позвольте мне объяснить это вам в биографии. Вот сколько текстового пространства мы будем использовать, когда будем писать биографию. В следующем примере мы сильнее переплетем CSS.
Это связано с тем, как HTML развивался на протяжении многих лет. Для этого мы используем текстовое поле.
<textarea name="bio" id="bio" cols="30" rows="10"></textarea>
Сначала я получаю имя, затем идентификатор, что я обычно делаю так же, как получаю имя. Затем у нас есть протоколы и строки. Эти поля показывают нам, какой длины будет текст и какой длины будет текст. Если я запишу это так
Вот как это будет выглядеть, и если я буду держать эту часть мышкой и перемещать ее, она изменится. Мы можем сделать его больше и меньше так, как мы хотим. Отметим, что это открывающая и закрывающая метка. Я мог бы написать ваш bien в этой части или что-то в этом роде
<textarea name="bio" id="bio" cols="30" rows="10">enter your bio ...</textarea>and i can see that it's written here automatically.
и я вижу, что это написано здесь автоматически.
Однако, даже если пользователь что-то в нем напишет, оно не будет удалено. Поэтому, когда пользователь захочет что-то добавить, он останется внутри вашей биографии. Есть другой способ добавить содержимое по умолчанию в это поле. Давайте посмотрим на это вместе. Мне нужна этикетка в первую очередь. Это будет для биографии.
<label for="bio">Your bio : </label> <br>
<textarea name="bio" id="bio" cols="30" rows="10"></textarea>
затем мы используем заполнитель для добавления контента по умолчанию. Это также известно как заполнитель.
<textarea name="bio" id="bio" cols="30" rows="10" placeholder="about you ..."></textarea>
Когда пользователь вводит текст, заполнитель встает и печатает там текст пользователя. Фактически, он дает нам ключ к тому, что мы пишем, и как только мы начинаем писать, он исчезает.
Мы можем использовать заполнители в другом месте. Например, текст, который даст пользователю подсказку, как в примере, который мы делали вначале.
<form>
<label for="username">Enter username: </label>
<input type="text" id="username" name="username" placeholder="username">
<br><br>
<label for="email">Enter email: </label>
<input type="email" id="email" name="email" placeholder="your mail">
<br><br>
<label for="password">password</label>
<input type="password" id="password" name="password" placeholder="choose a password ">
</form>
Если бы мы могли просто просмотреть это
таким образом, он будет заполнителем. Теперь есть одна последняя часть, которую я хочу показать вам. Кнопка отправки. Кнопка, которую пользователь нажимает, чтобы отправить то, что он делает. Мы вводим ввод, чтобы сделать это.
<input type="submit" value="submit the form">
Если мы собираемся сделать это перед вами, сделайте так, чтобы это выглядело так. Если мы собираемся сообщить пользователю, что все эти вещи в порядке, мы собираемся использовать required для этого. Позвольте мне сказать это так. Нам нужно добавить это, чтобы начальная часть пароля электронной почты не была пустой.
<form>
<label for="username">Enter username: </label>
<input type="text" id="username" name="username" placeholder="username" required>
<br><br>
<label for="email">Enter email: </label>
<input type="email" id="email" name="email" placeholder="your mail" required>
<br><br>
<label for="password">password</label>
<input type="password" id="password" name="password" placeholder="choose a password" required>
</form>
Это говорит нам о том, что вы не можете пройти или войти с неправильным текстом, не заполнив его таким образом.
После всего, что мы сделали, у нас есть базовая веб-форма. Есть разные типы данных, которые я могу использовать, и я добавлю их прямо здесь.
Если бы мы могли просто взглянуть на то, что мы узнали на этой неделе
— как создать веб-форму и для чего нужна функция «действие»?
— мы рассмотрели многие из наиболее распространенных типов ввода
*текст, почта, пароль, радио, select, text-area
— как использовать теги, качество идентификатора и качество имени
— Как отправлять и проверять формы
То, что я хочу сделать после этой части, честно говоря, немного больше похоже на загрузку CSS. Потому что CSS поможет нам создавать веб-сайты, которые выглядят лучше. На следующей неделе мы больше сосредоточимся на CSS. Все берегите себя, потому что на следующей неделе мы собираемся как бомба.
Как и каждую неделю, вы можете проверить последнюю версию нашего кода по ссылке на github.
Türkçe dil seçeneği ile birlikte
