카테고리 보관물: HTML 입력 양식

HTML 입력 양식

HTML 폼 요소(Form Element) 종류

<input> 요소

가장 중요한 양식 요소는 <input> 요소이다. <input> 요소는 type 속성을 사용하여 여러가지 방식으로 표시될 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 폼 요소 종류</title>
</head>

<body>
	<h2>HTML 폼 요소 input</h2>
	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name"><br>
		학번 : <br>
		<input type="text" name="student_id"><br><br>
		<input type="submit" value="전송">
	</form>
</body>
</html>

<select> 요소

<select> 요소는 드롭 다운 목록을 정의한다. 기본적으로 첫번째 드롭다운 목록의 첫번째 항목이 선택된다. 임의로 선택항목을 지정하고 싶다면 selected 옵션을 추가하면 된다.

이밖에도 아래와 같은 옵션이 더 존재한다.

  • selected : 임의로 선택항목 지정.
  • size : 값의 수를 지정하는 속성.
  • multiple : 여러개의 값을 선택할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 폼 요소 종류</title>
</head>

<body>
	<h2>HTML 폼 요소 select</h2>
	<form action="/examples/media/request.php">
		<select name="cars">
			<option value="엑센트">소나타</option>
			<option value="아반떼">아반떼</option>
			<option value="소나타">소나타</option>
			<option value="그랜저" selected>그랜저</option>
		</select>
		<p>
		<input type="submit" value="전송">
	</form>
</body>
</html>

<textarea> 요소

<textarea> 요소는 여러 줄 입력 필드 (텍스트 영역)를 정의한다. CSS 스타일시트를 사용하여 텍스트 영역의 크기나 디자인을 정의할 수도 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 폼 요소 종류</title>
</head>

<body>
	<h2>HTML 폼 요소 textarea</h2>
	<form action="/examples/media/request.php">
		<textarea name="message" rows="10" cols="30">
		textarea 옵션을 사용한 모습입니다. 텍스트영역 전체를 전송할 수 있습니다.
		</textarea>
		<p>
		<input type="submit" value="전송">
	</form>
</body>
</html>

<button> 요소

클릭해서 어떤 행동이 발생하는것이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 폼 요소 종류</title>
</head>

<body>
	<h2>HTML 폼 요소 button</h2>
	<button type="button" onclick="alert('안녕하십니까?!')">클릭해주세요!!</button>
</body>
</html>

HTML5 <datalist> 요소

미리 정의 된 옵션의 리스트를 정의한 것이다. 사용자는 데이터를 입력 할 때 사전 정의 된 옵션의 드롭 다운 목록을 볼 수 있다. list의 속성 <input> 요소는 참조해야 되며, id의 속성 <datalist>요소이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 폼 요소 종류</title>
</head>

<body>
	<h2>HTML 폼 요소 datalist</h2>
	<form action="/examples/media/request.php">
		<input list="browsers">
			<datalist id="browsers">
				<option value="Internet Explorer">
				<option value="Firefox">
				<option value="Chrome">
				<option value="Opera">
				<option value="Safari">
			</datalist> 
		<p>
		<input type="submit" value="전송">
	</form>
</body>
</html>

HTML5 <output> 요소

계산 결과를 나타낸다. 미리 지정된 값을 조절해서 데이터를 넘겨주게 된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 폼 요소 종류</title>
</head>

<body>
	<h2>HTML 폼 요소 output</h2>
	<form action="request.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
		0
		<input type="range"  id="a" name="a" value="50">
		100 +
		<input type="number" id="b" name="b" value="50">
		=
		<output name="x" for="a b"></output>
		<p>
		<input type="submit" value="전송">
	</form>
</body>
</html>

HTML 양식 요소

태그내용
<form>사용자 입력을위한 HTML 양식을 정의합니다.
<input>입력 컨트롤을 정의합니다.
<textarea>여러 줄 입력 컨트롤 (텍스트 영역)을 정의합니다.
<label> 요소에 대한 레이블을 정의합니다.
<fieldset>양식의 관련 요소 그룹화
<legend>요소에 대한 캡션을 정의합니다.
<select>드롭 다운 목록을 정의합니다.
<optgroup>드롭 다운 목록에서 관련 옵션 그룹을 정의합니다.
<option>드롭 다운 목록에서 옵션을 정의합니다.
<button>클릭 가능한 버튼을 정의합니다.
<datalist>입력 컨트롤에 대해 미리 정의 된 옵션 목록을 지정합니다.
<output>계산 결과를 정의합니다.