HTML_05) 하이퍼링크 태그, 입력 양식 및 Form 태그

• 하이퍼링크 태그의 기본 개념과 활용법 이해
• 다양한 링크 방식(텍스트, 이미지, 페이지 내 이동) 구현
• 입력양식 관련 태그들의 종류와 특성 파악
• form 태그의 동작 원리와 서버 통신 방식 학습

---

<하이퍼링크 관련 태그>

- 하이퍼링크의 기본 개념

하이퍼링크는 웹문서의 가장 핵심적인 기능이다. 클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해주는 기능으로, 텍스트나 이미지를 클릭해 다른 링크로 접속하거나 페이지 내에서의 이동이 가능하다.

- 기본 하이퍼링크 태그 사용법

<!-- 기본 링크 구조 -->
<a href="연결할주소">표시될텍스트</a>

<!-- 다른 HTML 파일로 연결 -->
<ul>
    <li><a href="./01_글자관련태그.html">01_글자관련태그</a></li>
    <li><a href="./02_목록관련태그.html">02_목록관련태그</a></li>
    <li><a href="./03_표관련태그.html">03_표관련태그</a></li>
    <li><a href="./04_미디어관련태그.html">04_미디어관련태그</a></li>
</ul>

주요 속성:

• href: 연결할 링크 주소를 지정하는 속성

- target 속성 활용

네이버로이동

target 속성 값:

• _self: 현재 탭에서 열기(기본값)
• _blank: 새 탭에서 열기

- 이미지를 이용한 링크

이미지 태그를 a 태그로 감싸면 이미지 클릭으로 링크 이동이 가능하다.

- 페이지 내 이동(앵커 링크)

<!-- 이동할 위치에 id 지정 -->
<h3 id="main">메인 제목</h3>

<!-- 해당 id로 이동하는 링크 -->
<a href="#main">메인으로 바로가기</a>

<!-- 다른 위치로 이동 -->
<a href="#main2">아래로이동</a>
<h4 id="main2">도착지점</h4>

핵심 포인트:

• id 속성은 페이지 내에서 유일한 식별자여야 함
• href="#id명" 형식으로 페이지 내 특정 위치로 이동 가능

---

<입력양식 관련 태그>

- input 태그 기본 개념

input 태그는 사용자에게 값을 입력받을 수 있는 다양한 요소를 만드는 태그이다. type 속성에 따라 텍스트상자, 체크박스, 라디오버튼 등 다양한 형태로 구현된다.

- 기본 input 타입들

<!-- 기본 텍스트 입력 -->
아이디 : <input type="text">

<!-- 비밀번호 입력 (문자 숨김) -->
비밀번호 : <input type="password">

<!-- 라디오 버튼 (하나만 선택) -->
성별 : 
<label>
    <input type="radio" name="gender" checked> 남
</label>
<label>
    <input type="radio" name="gender"> 여
</label>

<!-- 버튼 -->
<input type="button" value="회원가입">
<button>취소</button>

실행 결과:

아이디 입력창과 비밀번호 입력창이 생성되고, 
성별 선택을 위한 라디오 버튼과 버튼들이 표시됨

---

<form 태그>

- form 태그의 역할과 속성

form 태그는 사용자로부터 입력을 받아 서버에 전달하는 영역을 정의하는 HTML 태그이다.

<form action="서버경로" method="전송방식">
    <!-- 입력 요소들 -->
</form>

주요 속성:

• action: 사용자 입력값을 전달할 서버의 경로
• method: 요청 전송방식 지정
  • GET: URL에 값이 노출되며 head에 담아 전송
  • POST: URL에 값이 노출되지 않으며 HTTP body에 숨겨서 전송

- 실제 form 구현 예제

검색어

로그인

아이디 :
비밀번호 :

실행 결과:

검색어 입력창과 검색 버튼이 생성되어 네이버 검색 기능 동작
로그인 폼이 fieldset으로 그룹화되어 표시

---

<다양한 input 타입들>

- 텍스트 관련 입력 타입

<!-- 기본 텍스트 -->
아이디 : <input type="text" name="userId" placeholder="아이디를 입력하세요..." maxlength="12" required>

<!-- 비밀번호 -->
<input type="password">

<!-- 기타 텍스트 타입 -->
<input type="search" value="최지원">
<input type="url">
<input type="email">

주요 속성:

• maxlength: 최대 입력 길이 제한
• placeholder: 입력 힌트 텍스트
• required: 필수 입력 지정

- 여러 줄 텍스트 입력

<textarea name="descript" style="resize: none;" cols="50" rows="10">
    안녕하세요.
</textarea>

속성:

• cols: 가로 크기, rows: 세로 크기
• resize: none: CSS로 크기 조절 제한

- 숫자 관련 입력 타입

<!-- 숫자 입력 (스핀박스) -->
<input type="number" name="amount" min="0" max="20" step="5" value="20">

<!-- 범위 슬라이더 -->
<input type="range" min="0" max="100" step="10" value="10">

- 날짜 및 시간 입력

date : <input type="date">                    <!-- 연도/월/일 -->
month : <input type="month">                  <!-- 연도/월 -->
week : <input type="week">                    <!-- 연도/주 -->
time : <input type="time">                    <!-- 시/분 -->
datetime-local : <input type="datetime-local"> <!-- 연도/월/일/시/분 -->

---

<선택 관련 입력 요소>

- 드롭다운 선택 (Select Box)

<select name="menu">
    <option value="1">국밥</option>
    <option value="2" selected>비빔밥</option>
    <option value="3">피자</option>
</select>

특징: 드롭다운 목록에서 하나만 선택 가능

- 라디오 버튼 (단일 선택)

<label>
    <input type="radio" name="color" value="red" checked> 빨강
</label>
<label>
    <input type="radio" name="color" value="yellow"> 노랑
</label>

핵심: 같은 name 속성값을 가진 라디오버튼끼리 그룹화되어 하나만 선택 가능

- 체크박스 (다중 선택)

<label>
    <input type="checkbox" name="color" value="red" checked> 빨강
</label>
<label>
    <input type="checkbox" name="color" value="yellow"> 노랑
</label>
<label>
    <input type="checkbox" name="color" value="blue"> 파랑
</label>

특징: 동시에 여러 값 선택 가능하며, 같은 name으로 배열 형태로 서버에 전달

- 폼 전용 버튼

<button type="submit">전송</button>    <!-- 폼 데이터 서버로 전송 -->
<button type="reset">초기화</button>   <!-- 폼 데이터 초기화 -->
<button type="button">일반버튼</button> <!-- 일반 버튼 -->

중요사항: form 내에서는 기본값이 submit이므로, 일반 버튼으로 사용하려면 반드시 type="button"을 지정해야 한다.

---

정리 및 요약

하이퍼링크 태그의 핵심:

• <a href=""> 태그로 링크 생성
• target="_blank"로 새 탭 열기
• id와 #를 이용한 페이지 내 이동
• 이미지도 링크로 활용 가능

입력양식 태그의 핵심:

• <input> 태그의 다양한 type 속성 활용
• <form> 태그로 서버와의 데이터 통신
• GET과 POST 방식의 차이점 이해
• 선택 요소들의 특성 (radio는 단일, checkbox는 다중)

이러한 태그들을 적절히 조합하면 사용자와 상호작용하는 동적인 웹페이지를 구현할 수 있다.