반응형
HTML 폼
HTML 폼은 사용자로부터 입력을 받아 서버로 전송하는 데 사용됩니다. 폼은 다양한 입력 요소를 포함하며, 사용자가 데이터를 입력하고 제출할 수 있게 합니다.
폼 요소
<form>
: 폼을 정의하는 요소입니다.action
: 폼 데이터를 제출할 URL을 지정합니다.method
: 폼 데이터를 전송하는 HTTP 메서드를 지정합니다 (GET
또는POST
).
예제:
<form action="/submit" method="post">
<!-- 폼 요소들이 여기 들어갑니다 -->
</form>
입력 요소
입력 요소는 폼 내에서 사용자로부터 데이터를 입력받는 다양한 방법을 제공합니다.
텍스트 입력
<input type="text">
: 단일 행 텍스트 입력 필드를 정의합니다.<input type="password">
: 암호 입력 필드를 정의합니다. 입력한 텍스트가 숨겨집니다.<input type="email">
: 이메일 주소를 입력받는 필드를 정의합니다. 이메일 형식을 검증합니다.<input type="url">
: URL을 입력받는 필드를 정의합니다. URL 형식을 검증합니다.
예제:
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<label for="website">웹사이트:</label>
<input type="url" id="website" name="website">
</form>
라디오 버튼과 체크박스
<input type="radio">
: 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼을 정의합니다.<input type="checkbox">
: 여러 옵션을 선택할 수 있는 체크박스를 정의합니다.
예제:
<form>
<p>성별:</p>
<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>
<p>취미:</p>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">독서</label>
<input type="checkbox" id="hobby2" name="hobby" value="traveling">
<label for="hobby2">여행</label>
<input type="checkbox" id="hobby3" name="hobby" value="sports">
<label for="hobby3">운동</label>
</form>
선택 상자와 리스트
<select>
: 드롭다운 리스트를 정의합니다.<option>
: 드롭다운 리스트의 옵션을 정의합니다.
예제:
<form>
<label for="country">국가:</label>
<select id="country" name="country">
<option value="korea">대한민국</option>
<option value="usa">미국</option>
<option value="japan">일본</option>
</select>
</form>
다중 선택 리스트
<select multiple>
: 여러 항목을 선택할 수 있는 리스트를 정의합니다.
예제:
<form>
<label for="fruits">과일:</label>
<select id="fruits" name="fruits" multiple>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="orange">오렌지</option>
</select>
</form>
텍스트 영역
<textarea>
: 여러 행의 텍스트 입력 필드를 정의합니다.
예제:
<form>
<label for="message">메시지:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>
버튼
<button>
: 버튼을 정의합니다. 텍스트나 이미지로 표시할 수 있습니다.<input type="submit">
: 폼 데이터를 제출하는 버튼을 정의합니다.<input type="reset">
: 폼 필드를 초기화하는 버튼을 정의합니다.
예제:
<form>
<input type="submit" value="제출">
<input type="reset" value="초기화">
</form>
폼 속성
action
: 폼이 제출될 URL을 지정합니다.method
: 폼 데이터를 제출할 HTTP 메서드를 지정합니다 (GET
또는POST
).name
: 폼의 이름을 지정합니다.target
: 폼이 제출될 창을 지정합니다 (_self
,_blank
,_parent
,_top
).autocomplete
: 폼 자동 완성을 설정합니다 (on
또는off
).
예제:
<form action="/submit" method="post" name="contactForm" target="_blank" autocomplete="on">
<!-- 폼 요소들이 여기 들어갑니다 -->
</form>
결론
HTML 폼과 입력 요소는 사용자로부터 데이터를 입력받고 처리하는 중요한 도구입니다. 다양한 입력 요소와 속성을 활용하여 사용자 친화적인 폼을 작성할 수 있습니다. 이번 글에서는 폼과 입력 요소의 다양한 속성과 사용법에 대해 배웠습니다.
다음 글에서는 HTML5 시맨틱 요소에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'웹 디자인' 카테고리의 다른 글
[웹 디자인] 7일차: HTML 멀티미디어 요소 (0) | 2024.08.07 |
---|---|
[웹 디자인] 6일차: HTML5 시멘틱 요소 (0) | 2024.08.06 |
[웹 디자인] 4일차: HTML 링크와 이미지 (0) | 2024.08.04 |
[웹 디자인] 3일차: HTML 리스트와 테이블 (0) | 2024.08.03 |
[웹 디자인] 2일차: HTML 텍스트 관련 요소 (0) | 2024.08.02 |