[HTML] 폼 삽입(form)

728x90

HTML 폼 탐험: 사용자와의 상호작용 증진하기!

안녕하세요, 웹의 대화 창을 열어줄 '폼'에 대해 알아보는 시간입니다! 💬 웹 폼은 사용자로부터 정보를 수집하거나 사용자와 상호작용하는데 필수적인 요소입니다. 오늘은 HTML에서 어떻게 폼을 생성하고 구성하는지 알아보도록 하겠습니다.

1. HTML 폼이란?

웹 폼은 사용자로부터 데이터를 입력받을 수 있는 요소들로 구성된 영역입니다. 로그인 정보, 설문조사, 회원가입 정보 등 다양한 데이터를 수집하는 데 활용됩니다.

2. HTML에서 폼 생성하기

폼 태그: `<form>`

기본 구조: <form> 태그는 웹 폼을 정의합니다. action 속성은 폼 데이터를 처리할 서버의 URL을 지정하며, method 속성은 데이터 전송 방식(GET, POST)을 지정합니다.

<form action="서버URL" method="전송방식">
    <!-- 폼 요소들 -->
</form>

3. 주요 폼 요소들

텍스트 입력 필드: 사용자로부터 한 줄의 텍스트 정보를 입력받습니다.

<label for="username">이름:</label>
<input type="text" id="username" name="username">

이름:

비밀번호 입력 필드: 비밀번호와 같이 숨겨야 하는 정보를 입력받습니다.

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">

비밀번호:

라디오 버튼: 여러 옵션 중 하나를 선택하게 합니다.

<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>

남성 여성

체크박스: 여러 옵션 중 여러 개를 선택하게 합니다.

<input type="checkbox" id="option1" name="option" value="Option1">
<label for="option1">옵션 1</label>
<input type="checkbox" id="option2" name="option" value="Option2">
<label for="option2">옵션 2</label>

옵션 1 옵션 2

선택 목록: 드롭다운 형태의 여러 옵션 중 하나나 여러 개를 선택하게 합니다.

<select name="fruit">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
</select>

텍스트 영역: 여러 줄의 텍스트를 입력받습니다.

<textarea name="message" rows="4" cols="50">
메시지를 입력하세요.
</textarea>

제출 버튼: 폼의 데이터를 서버로 전송합니다.

<input type="submit" value="제출">

4. 요약: 주요 태그와 속성 정리

<form>: 웹 폼을 정의. 주로 action과 method 속성과 함께 사용됩니다.
<input>: 다양한 형태의 입력 요소를 생성. type 속성으로 입력 방식을 지정합니다.
<label>: 입력 요소의 설명 또는 라벨을 지정.
<select>와 <option>: 드롭다운 선택 목록을 생성.
<textarea>: 여러 줄의 텍스트 입력 영역을 생성.

마치며

웹 폼은 사용자와 웹 사이트간의 대화 창이라 할 수 있습니다. 위에서 소개한 요소들을 조합하여 원하는 형태의 폼을 만들 수 있습니다. 다음 포스트에서는 웹 페이지 디자인의 다른 멋진 요소들을 함께 살펴보겠습니다. 계속해서 함께 해주세요! 📝💌🚀