Вывод формы в браузере [Архив форума]

Просмотр полной версии : Вывод формы в браузере

Rudman

25.03.2020, 16:34

Есть обычная форма заполнения: Имя и сообщение
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>DOOM</title>
</head>
<body>
<script src="js/script.js"></script>
<div class="cont">
<h4>Add new message</h5>

<div class="cont">
<form class="form">
<p>
<label for="name"> Your name:</label>
<input type="text" name="name">
</p>

<p>
<label for="message">Your message:</label>
<textarea name="message" cols="30" rows="5"></textarea>
</p>

<div class="sumbit">Send</div>
</form>
</div>

</body>
</html>

CSS:
*{
background-color: #fbf3ea;
}

div.cont{
margin-left: 10px;
}

h4{
font-family: fantasy;
font-size: 2em;
font-weight: 300;
text-align: center;
}

.form label{
width: 180px;
float: left;
font-size: 1.2em;
font-family: Arial;
font-weight: 700;
}

.form input, textarea{
width: 500px;
text-align: center;
font-family: Arial;
font-weight: 700;
}

.form input, textarea{
padding: 9px;
border: 1px solid #E5E5E5;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
background: white;
}

div.sumbit{
border: 1px solid #E5E5E5;
border-radius: 5px;
background: #c7c7c7;
width: 500px;
text-align: center;
font-family: Arial;
font-weight: 700;
margin-left: 11.4em;
padding: 5px;
}

div.sumbit:hover{
border: 1px solid black;
border-radius: 5px;
background: #d6d6d6;

width: 500px;
text-align: center;
font-family: Arial;
font-weight: 700;
margin-left: 11.4em;
padding: 5px;
}

Как вывести данные которые ввел пользователь в браузере, используя js?

voraa

25.03.2020, 17:45

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >

<title>DOOM</title>
<style>
*{
background-color: #fbf3ea;
}

div.cont{
margin-left: 10px;
}

h4{
font-family: fantasy;
font-size: 2em;
font-weight: 300;
text-align: center;
}

.form label{
width: 180px;
float: left;
font-size: 1.2em;
font-family: Arial;
font-weight: 700;
}

.form input, textarea{
width: 500px;
text-align: center;
font-family: Arial;
font-weight: 700;
}

.form input, textarea{
padding: 9px;
border: 1px solid #E5E5E5;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
background: white;
}

div.sumbit{
border: 1px solid #E5E5E5;
border-radius: 5px;
background: #c7c7c7;
width: 500px;
text-align: center;
font-family: Arial;
font-weight: 700;
margin-left: 11.4em;
padding: 5px;
}

div.sumbit:hover{
border: 1px solid black;
border-radius: 5px;
background: #d6d6d6;

width: 500px;
text-align: center;
font-family: Arial;
font-weight: 700;
margin-left: 11.4em;
padding: 5px;
}

#res {
color: red;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.sumbit').addEventListener ('click', () => {
document.getElementById('res').innerHTML=`
Введено <br>
Your name: ${document.querySelector('input').value}<br>
Your message: ${document.querySelector('textarea').value}
`
})
})
</script>
</head>
<body>
<div class="cont">
<h4>Add new message</h5>

<div class="cont">
<form class="form">
<p>
<label for="name"> Your name:</label>
<input type="text" name="name">
</p>

<p>
<label for="message">Your message:</label>
<textarea name="message" cols="30" rows="5"></textarea>
</p>

<div class="sumbit">Send</div>
</form>
</div>

<div id='res'></div>

</body>
</html>

<div class="sumbit">Send</div>
Почему sumbit?
Зачем <div>, а не <button>?
<div> в качестве кнопки сам по себе не обеспечивает полнофункционального поведения. На него нельзя переходить по TAB (надо дополнительно ставить tabintex) Его нельзя нажать клавиатурой (надо дополнительно вешать обработчики нажатий клавиш)

Rudman

25.03.2020, 18:01

То что нужно, а что добавить чтоб выводилось несколько сообщении а не одно?

voraa

25.03.2020, 18:12

Какие несколько сообщений?

Rudman

25.03.2020, 18:14

Сейчас можно выводить только один комментарий, а как вывести 2 и большое? цикл добавить?

voraa

25.03.2020, 18:19

Ну если вы снова введете что то и кликните свой div, то выведется снова. Новый вывод затрет старый.
Если нужно, что бы не затирал, поставьте

document.getElementById('res').innerHTML += `
Введено <br>
Your name: ${document.querySelector('input').value}<br>
Your message: ${document.querySelector('textarea').value}<br>
`

Rudman

25.03.2020, 18:42

voraa, Спасибо, выручили