Basic Form API

by AntowaKartowa

HTML

<form name="first" method="post" enctype="multipart/form-data">
 	<p>
 		<label for="name"><strong>Ваше имя:</strong></label><br>
		<input type="text" size="40" name="name" id="name" placeholder="Введите имя">
	</p>
	
	<p>
 		<label for="photo"><strong>Ваше фото:</strong></label><br>
		<input type="file" name="photo" id="photo" accept=".png, .jpg, .jpeg, .webm">
	</p>

	<p>
		<strong>Ваши любимые напитки:</strong><br>
		<label><input type="checkbox" name="beer" value="beer"> Пиво</label><br>
		<label><input type="checkbox" name="tea" checked value="tea"> Чай</label><br>
		<label><input type="checkbox" name="coffee" value="coffee"> Кофе</label>
	</p>

	<p>
		<strong>Каким браузером в основном пользуетесь:</strong><br>
		<label><input type="radio" name="browser" value="ie"> Internet Explorer</label><br>
		<label><input type="radio" name="browser" value="opera"> Opera</label><br>
		<label><input type="radio" name="browser" value="firefox"> Firefox</label>
	</p>
	
	<p>
		<label for="os"><strong>Какой операционной системой польузетесь:</strong></label><br>
		<select name="os" id="os">
			<option selected disabled>Select OS…</option>
			<option value="mac">MacOS</option>
			<option value="win">Windows</option>
			<option value="linux">Linux</option>
			<option value="unix">Unix</option>
		</select>
	</p>
	 
	<p>
		<input type="submit" value="Отправить">
		<input type="reset" value="Очистить">
	</p>
</form>

<br><br><hr><br>

<form name="second">
	<input type="text" size="20" name="first_name" id="firstName" placeholder="Введите имя">
	<input type="text" size="20" name="second_name" id="secondName" placeholder="Введите фамилию">
	
	<p>
		<input type="submit">
	</p>
</form>

<br>
<br>
<hr>
<br>

<button id="testButton">Test</button>

JavaScript

testButton.onclick = runTest;

function runTest() {
	let firstForm = document.forms[0];
	let testForm = document.forms.first;
	//let secondForm = document.forms.second;

	//alert(firstForm === testForm);
	//alert(secondForm.elements.length);
	//alert(secondForm.first_name.placeholder);
	//alert(firstForm.browser);
	//alert(firstForm.browser[1].value);
	//alert(`"${secondForm.first_name.value}"`);
	//alert(firstName.form === secondForm);
	//alert(firstForm.os.value)
	//let option = firstForm.os.options[2];
	//alert(`${option.index}, ${option.selected}, ${option.text}, ${option.value}`);
	
	//firstForm.tea.checked = !firstForm.tea.checked;
	//firstForm.name.disabled = !firstForm.name.disabled;
	//firstForm.name.placeholder = firstForm.name.disabled ? 'Заблокировано' : 'Введите имя';
	
	//firstForm.os.options[3].selected = true;
	//firstForm.os.selectedIndex = 3;
	//firstForm.os.value = 'linux';
}