[HTML] 폼 태그 - 사용자 정보 입력받기

폼태그

웹 브라우저에서 데이터를 입력받아 서버로 전송한다.

<input>, <select>, <textarea>, <form>이 있다.

 

 

1. <input> - 다양한 정보 입력받기

 

<input> 태그는 type 속성을 다르게 지정해서 다양한 입력 형태로 만들 수 있다.

<label> 태그를 함께 사용하여 폼 요소에 입력받을 내용이 무엇인지 나타낸다.

 

 

type 종류

• text

    <label>아이디</label>
    <input type="text" />

• password

<label>비밀번호</label>
<input type="password">

• checkbox

태그에 value 속성을 추가하면 선택한 체크 박스의 value 값을 서버로 전송할 수 있다.

<h3>좋아하는 아이스크림 회사</h3>
<label>하겐다즈</label><input type="checkbox" value="haagen-dazs">
<label>베스킨라빈스 31</label><input type="checkbox" value="baskin-robbins 31">
<label>나뚜루</label><input type="checkbox" value="natuur">

 

• radio

각 태그 속성에 name 값을 똑같이 입력하면 사용자는 값을 하나만 택할 수 있다.

    <h4>직업</h4>
    <label>프론트 엔드</label>
    <input type="radio" name="job" value="front-end" />

    <label>백엔드</label>
    <input type="radio" name="job" value="back-end" />

    <label>UI/UX</label>
    <input type="radio" name="job" value="ui/ux" />

• file

    <label>첨부 파일</label>
    <input type="file" />

• color

    <label>색상 선택</label>
    <input type="color" />

• date

    <label>날짜 선택</label>
    <input type="date" />

 

• submit / reset

submit 속성은 사용자가 폼에 입력한 모든 데이터를 서버에 제출한다.

반대로 reset 속성은 기존에 입력한 모든 값을 비운다.

버튼 이름을 다르게 지정하려면  value="텍스트" 속성을 추가하면 된다.

    <label>제출</label>
    <input type="submit" value="제출 버튼" />

    <br />

    <label>초기화</label>
    <input type="reset" value="초기화 버튼" />

 

2. <select> - 드롭다운 메뉴로 항목 선택하기

먼저 <select> 태그를 입력하고 자식 태그로 <option>을 작성한다.

    <select>
        <option value="HTML">HTML</option>
        <option value="css">css</option>
        <option value="Javascript">Javascript</option>
    </select>

 

 

3. <textarea> - 텍스트를 여러 줄 입력받기

텍스트를 여러 줄 입력받을 수 있는 텍스트 영역을 만든다.

메모나 게시판의 입력란을 생성할 때 사용한다.

cols와 rows로 입력란의 크기를 설정한다.

maxlength로 글자 제한을 할 수 있다.

<textarea cols="30" rows="10" maxlength="10"></textarea>

 

 

4. <form> - 여러 입력 양식을 그룹화하고 전송

 

여러 폼 요소를 그룹으로 만들어 백엔드로 한 번에 전송한다.

<form> 태그는 action과 method 속성을 반드시 지정해야 한다.

action 속성은 특정 주솟값이나 파일 위치,

method 속성은 입력값의 전송 방식을 지정한다.

<form> 태그에 있는 모든 데이터를 입력하고 전송 버튼을 누르면,

입력된 값이 mothod 속성에 지정한 전송 방식으로,

action 속성에 지정된 위치로 전달된다.

 

 

 

 

 

 

 

참고 사이트

 

https://webzz.tistory.com/339

[HTML] <textarea>