Форма исключительно с использованием Javascript - PullRequest
0 голосов
/ 08 марта 2019

У меня есть задание, я не понимаю его как новичка.

Создайте сценарий JavaScript, который будет изменять DOM веб-страницы.Сценарий должен добавить форму с 4 элементами: имя, адрес электронной почты, сообщение (textarea) и кнопка отправки.Каждый элемент должен содержать метку со своим именем.Например, поле имени является типом ввода, вы должны по-прежнему создавать из javascript метку с именем «Имя», то же самое для остальных, кроме кнопки «Отправить».Кроме того, каждый лабер должен иметь цвет, добавленный из JavaScript (красный, синий, желтый).Когда вы нажимаете кнопку «Отправить», на нем должно появиться предупреждение: «Вы уверены, что хотите отправить это сообщение?».

Заранее спасибо.

1 Ответ

0 голосов
/ 08 марта 2019

Мне нужно использовать только Javascript для этого, и я могу найти только ответы, которые используют HTML

Веб-приложения используют HTML для хранения, визуализации и отображения элементов в окне просмотра (окно браузера).

Где вы намереваетесь визуализировать форму и захватить ввод пользователя?

Вы можете построить структуру DOM, используя только JavaScript, однако все равно будет HTML-файл, который будет содержать элементы HTML, созданные с использованием javascript.

Пожалуйста, предоставьте ясность относительно желаемой целии для какого типа приложения это используется.

Для простоты мне кажется, что вам потребуется использовать HTML в качестве файла шаблона и JavaScript для интерактивности и манипулирования файлом HTML.

Сценарий должен добавить форму с 4 элементами: имя, адрес электронной почты, сообщение (текстовое поле) и кнопка отправки.Каждый элемент должен содержать метку со своим именем.Например, поле имени является типом ввода, вы должны по-прежнему создавать из javascript метку с именем «Имя», то же самое для остальных, кроме кнопки «Отправить».Кроме того, каждый лабер должен иметь цвет, добавленный из JavaScript (красный, синий, желтый).Когда вы нажимаете кнопку «Отправить», должно появиться предупреждение: «Вы уверены, что хотите отправить это сообщение?».Вот и все.

Это только начало, чтобы попытаться помочь вам понять концепции.

Я, однако, умоляю вас пойти и исследовать с уверенностью - вы ничего не сломаете, просто попробуйте!

Я рекомендую вам взглянуть на некоторые из этих статей, взглянуть на мой (очень элементарный) код ниже и не стесняйтесь задавать любые вопросы, которые у вас есть!

JS: - W3 Schools JS и справочник по HTML

HTML: - W3 Schools: HTML Forms W3 Schools: Label Tag W3 Schools: Tag Text Area (Это было специально исключено из решения - попробуйте !!)

(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class?? 
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" value="Mickey Mouse">
  <br>
  <label for="email">Email:</label>
  <input type="text" name="email" id="email" value="mickey@mouse.co.uk">
  <br><br>
  <input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());
<!DOCTYPE html>
<html>

	<head>
		
		<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
		
	</head>

	<body>

	</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...