7. HTML 입력양식폼 관련 태그

HTML에서 사용자로부터 데이터를 입력받기 위한 다양한 태그들이 존재합니다. 이 글에서는 HTML에서 자주 사용하는 입력 양식 태그들에 대해 알아보겠습니다.

1. input 태그

input 태그는 사용자가 값을 입력할 수 있는 다양한 형태의 입력 상자를 제공합니다.

아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>
성별 : <input type="radio" name="gender">남
       <input type="radio" name="gender">여
<br>
<input type="submit" value="회원가입">

• type="text": 한 줄짜리 텍스트를 입력받습니다.
• type="password": 비밀번호 입력 상자입니다. 입력된 문자가 보이지 않습니다.
• type="radio": 여러 개 중 하나만 선택 가능한 라디오 버튼입니다.
• type="submit": 입력된 데이터를 서버로 전송하는 버튼입니다.

2. form 태그

form 태그는 사용자가 입력한 데이터를 서버로 전송하는 역할을 합니다.

<form action="https://search.naver.com/search.naver" method="get">
    <fieldset>
        검색어 : <input type="text" name="query"><br>
        <input type="submit" value="검색">
    </fieldset>
</form>

• action: 데이터를 전송할 서버의 URL을 지정합니다.
• method: 데이터를 전송하는 방식입니다. get과 post가 있으며, get은 데이터를 URL에 노출시키고, post는 데이터를 숨깁니다.
• fieldset: 관련된 입력 양식을 그룹화하여 테두리로 묶습니다.
• legend: fieldset 그룹에 제목을 붙입니다.

3. Text와 관련된 input 태그의 타입

텍스트와 관련된 다양한 input 태그들이 존재합니다.

아이디 : <input type="text" name="userId" placeholder="아이디를 입력해주세요." maxlength="12" required><br>
비밀번호 : <input type="password" name="userPwd" placeholder="영문, 숫자 포함 8~12자리" maxlength="12" required><br>
검색 : <input type="search" name="keyword"><br>
홈페이지 : <input type="url" name="url"><br>
이메일 : <input type="email" name="email"><br>
전화번호 : <input type="phone" name="phone"><br>
<input type="submit">

• type="text": 일반 텍스트 입력.
• type="password": 비밀번호 입력.
• type="search": 검색어 입력.
• type="url": URL 입력.
• type="email": 이메일 입력.
• type="phone": 전화번호 입력.

4. textarea 태그

textarea 태그는 여러 줄의 텍스트를 입력받을 수 있습니다.

설명 : <textarea name="description" cols="30" rows="10" style="resize: none;"></textarea>

• textarea: 여러 줄의 텍스트를 입력받습니다. cols와 rows 속성을 통해 크기를 지정할 수 있으며, resize: none;을 통해 크기 조정을 막을 수 있습니다.

5. 숫자와 관련된 input 태그의 타입

숫자를 입력받을 때 사용되는 input 태그 타입입니다.

수량 : <input type="number" name="amount" min="0" max="20" step="5" value="10"><br>
점수 : <input type="range" name="score" min="0" max="100" step="20"><br>
<input type="submit">

• type="number": 숫자만 입력 가능하며, 스핀 박스가 표시됩니다.
• type="range": 슬라이드 바를 통해 숫자를 선택할 수 있습니다.

6. 날짜 및 시간과 관련된 input 태그의 타입

날짜와 시간을 입력받을 수 있는 태그입니다.

date : <input type="date"><br>
month : <input type="month"><br>
week : <input type="week"><br>
time : <input type="time"><br>
datetime-local : <input type="datetime-local"><br>

• type="date": 연도, 월, 일을 입력받습니다.
• type="month": 연도와 월을 입력받습니다.
• type="week": 연도, 월, 주를 입력받습니다.
• type="time": 시와 분을 입력받습니다.
• type="datetime-local": 연도, 월, 일, 시, 분을 입력받습니다.

7. selectbox

select 태그는 드롭다운 목록을 만듭니다.

<select name="color">
    <option value="red">빨간색</option>
    <option value="blue">파란색</option>
</select>

• select: 여러 개 중 하나를 선택할 수 있는 목록입니다.
• option: 선택 가능한 항목을 정의합니다.

8. radio button

radio 버튼은 여러 개 중 하나를 선택할 때 사용합니다.

<input type="radio" name="gender" id="man" value="man" checked>
<label for="man">남자</label>

<input type="radio" name="gender" id="woman" value="woman">
<label for="woman">여자</label>

• type="radio": 여러 개 중 하나를 선택하는 버튼입니다.
• name: 같은 이름을 가진 버튼들은 하나의 그룹으로 묶입니다.
• checked: 기본 선택된 버튼을 지정합니다.
• label: 라벨과 버튼을 연결해줍니다.

9. checkbox

checkbox는 여러 개 중 여러 개를 선택할 수 있는 버튼입니다.

<input type="checkbox" id="red" value="red" name="color">
<label for="red">빨간색</label>

<input type="checkbox" id="blue" value="blue" name="color">
<label for="blue">파란색</label>

<input type="checkbox" id="yellow" value="yellow" name="color">
<label for="yellow">노란색</label>
<input type="submit">

• type="checkbox": 여러 개를 선택할 수 있는 버튼입니다.
• checked: 기본 선택된 버튼을 지정합니다.
• label: 라벨과 버튼을 연결해줍니다.