Contents
<양식 관련 태그>
- <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
