Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.03.2020, 16:34
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

Вывод формы в браузере
Есть обычная форма заполнения: Имя и сообщение
<!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?

Последний раз редактировалось Rudman, 25.03.2020 в 16:38.
Ответить с цитированием
  #2 (permalink)  
Старый 25.03.2020, 17:45
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

<!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" >
<!--	<link rel="stylesheet" href="css/style.css"> -->
	<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 src="js/script.js"> -->
<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) Его нельзя нажать клавиатурой (надо дополнительно вешать обработчики нажатий клавиш)
Ответить с цитированием
  #3 (permalink)  
Старый 25.03.2020, 18:01
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

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

Последний раз редактировалось Rudman, 25.03.2020 в 18:45.
Ответить с цитированием
  #4 (permalink)  
Старый 25.03.2020, 18:12
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Какие несколько сообщений?
Ответить с цитированием
  #5 (permalink)  
Старый 25.03.2020, 18:14
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

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

Последний раз редактировалось Rudman, 25.03.2020 в 18:19.
Ответить с цитированием
  #6 (permalink)  
Старый 25.03.2020, 18:19
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

document.getElementById('res').innerHTML += `
Введено <br>
Your name: ${document.querySelector('input').value}<br>
Your message: ${document.querySelector('textarea').value}<br>
`
Ответить с цитированием
  #7 (permalink)  
Старый 25.03.2020, 18:42
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

voraa, Спасибо, выручили
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сабмит формы или вывод данных lipinart jQuery 2 26.12.2015 13:22
Вывод формы с непостоянным количеством полей Phoenix32 Элементы интерфейса 4 03.07.2015 16:49
отправка данных из формы и вывод полученных данных sxe jQuery 2 21.05.2013 00:34
Нестабильно срабатывает вывод значений с формы NeVirus Элементы интерфейса 8 20.02.2013 09:34
Обработка формы и вывод на стороне браузера средствами DHTML redjetfire Events/DOM/Window 5 21.06.2012 11:08