<양식 관련 태그>
- <form> : 입력 양식을 정의하는 태그 - Block
- <input> : 사용자로부터 입력을 받는 태그 - Inline
- <button> : 버튼을 정의하는 태그 - Inline
- <select> : 드롭다운 목록을 정의하는 태그 - Block
- <textarea> : 여러 줄의 텍스트 입력을 정의하는 태그 - Block
- <label> : 양식 요소에 레이블을 지정하는 태그 - Block
- <date> : 특정 시간이나 날짜를 나타내는 데 사용 - Inline
예시)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
여기에 입력 양식을 넣습니다.
<div>이름: <input type="text"></div>
<div><input type="text" placeholder="이름"></div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
성별:
<input type="radio" name="gender" value="남자">
<input type="radio" name="gender" value="여자" checked>여자
<input type="radio" name="gender" value="그 외">그외
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
<input type="checkbox" name="color" value="붉은색" checked>붉은색
<input type="checkbox" name="color" value="파란색"> 파란색
<input type="checkbox" name="color" value="노란색"> 노란색
<input type="checkbox" name="color" value="초록색"> 초록색
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
<input type="submit" value="전송">
</form>
</body>
</html>l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjscXFPZGBLk_mvKRuVU-nQsTJALpa7cmI2w&usqp=CAU">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
혈액형
<select name="bloodtype">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
<option value="모름" selected>모름</option>
</select>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
<textarea name="message">메시지 입력</textarea>
<textarea name="message" placeholder="메시지 입력"></textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="example.php" method="post" name="contact-form">
<input type="checkbox" name="travel" value="국내" id="korea">
<label for="kores">국내</label>
<input type="checkbox" name="travel" value="유럽" id="europe">
<label for="europe">해외</label>
<input type="checkbox" name="travel" value="동남아시아" id="asia">
<label for="asia">동남아시아</label>
</form>
</body>
</html>
Share article
