📚 Тема: Создание формы входа/регистрации на веб-странице с помощью JavaScript
Создание формы входа или регистрации - это общая задача при разработке веб-сайтов. В этом посте мы рассмотрим, как создать простую форму входа/регистрации с использованием HTML, CSS и JavaScript.
🔹 HTML
Сначала создадим структуру формы с помощью HTML.
```html
<form id="loginForm">
<label for="username">Имя пользователя:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Пароль:</label><br>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Войти">
</form>
```
🔹 CSS
Теперь добавим немного стилей с помощью CSS, чтобы сделать форму более привлекательной.
```css
form {
width: 300px;
margin: 0 auto;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
```
🔹 JavaScript
Наконец, добавим немного JavaScript, чтобы обработать отправку формы.
```javascript
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username === '' || password === '') {
alert('Пожалуйста, заполните все поля');
} else {
alert('Добро пожаловать, ' + username + '!');
}
});
```
В этом коде мы добавляем обработчик событий 'submit' к нашей форме. Когда форма отправляется, мы предотвращаем ее стандартное поведение (перезагрузку страницы), затем получаем значения полей 'username' и 'password'. Если одно из полей пустое, мы выводим предупреждение. В противном случае, мы приветствуем пользователя.
Это простой пример, и в реальном проекте вам потребуется более сложная логика, включая проверку введенных данных и взаимодействие с сервером. Но это хорошая отправная точка для начала работы с формами в JavaScript.
Создание формы входа или регистрации - это общая задача при разработке веб-сайтов. В этом посте мы рассмотрим, как создать простую форму входа/регистрации с использованием HTML, CSS и JavaScript.
🔹 HTML
Сначала создадим структуру формы с помощью HTML.
```html
<form id="loginForm">
<label for="username">Имя пользователя:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Пароль:</label><br>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Войти">
</form>
```
🔹 CSS
Теперь добавим немного стилей с помощью CSS, чтобы сделать форму более привлекательной.
```css
form {
width: 300px;
margin: 0 auto;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
```
🔹 JavaScript
Наконец, добавим немного JavaScript, чтобы обработать отправку формы.
```javascript
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username === '' || password === '') {
alert('Пожалуйста, заполните все поля');
} else {
alert('Добро пожаловать, ' + username + '!');
}
});
```
В этом коде мы добавляем обработчик событий 'submit' к нашей форме. Когда форма отправляется, мы предотвращаем ее стандартное поведение (перезагрузку страницы), затем получаем значения полей 'username' и 'password'. Если одно из полей пустое, мы выводим предупреждение. В противном случае, мы приветствуем пользователя.
Это простой пример, и в реальном проекте вам потребуется более сложная логика, включая проверку введенных данных и взаимодействие с сервером. Но это хорошая отправная точка для начала работы с формами в JavaScript.