폼(form)이란 우리가 거의 매일 사용하는 네이버, 카카오 등등의 로그인, 회원가입 또는
요즘 핫!하는 스니커즈 래플(Raffle)폼 등 웹사이트로 정보를 보낼 수 있는 것들이다.
Form 태그
사용자로부터 다양한 형태의 데이터를 입력받기 위해 필요한 입력 요소들을 담는 컨테이너 태그
기본 문법
<form 속성=“속성 값”>
<!-- 여러가지 폼 요소 -->
</form>여기서 속성이란 것은 여러가지가 있다.
- action : 사용자로부터 입력받은 정보를 어디로 보내줄지, 즉 목적지를 입력하는 속성
- method : 전송하는 방식을 지정하는 속성
- GET(속성 값) : 주소 표시줄에 사용자가 입력한 내용이 드러남(ex: Google)
- POST : 대부분 이 방식 사용, 사용자의 입력을 표준 입력으로 넘겨줘서 길이 제한이 없고 입력한 내용이 드러나지 않음. 보안이 중요한 데이터를 전달할 때 사용
- name : 폼의 이름
- target : 처리 결과를 보여줄 창
INPUT 태그
사용자가 데이터를 입력할 수 있는 입력 타입을 지정하여 사용하는 태그(<form> 내부의 태그)
Input type
| Input type | |
|---|---|
| text | 한 줄 텍스트 |
| password | 비밀번호 (*로 표시됨) |
| radio | 여러 항목 중 하나 선택 가능 |
| checkbox | 체크박스 |
| sumit | 제출 버튼 |
| number | 특정 범위 숫자 |
| range | 특정 범위 숫자 |
| reset | 입력 양식 초기화 |
Input 주요 속성
1. name
<input name="important">서버에 데이터가 전달될 때 서식 값의 이름을 의미함. 이 속성은 반드시 사용하는 것이 좋음
- required
<input required>사용자가 반드시 입력을 해야 넘어갈 수 있게 하는 속성
- placeholder
<input placeholder="이렇게 입력하세요">사용자가 데이터를 입력하기 전 입력 예시를 보여줄 때 매우 유용한 속성
- maxlength , minlength
<input maxlength="5"> ***입력값의 최대길이가 5이다.
<input minlength="5"> ***입력값의 최소길이가 5이다.입력값의 최대 최소 길이를 지정해 주는 속성
Input안에서의 Label역할
<label> 은 <form> 의 양식에 이름을 붙이는 태그다. 주요 속성은 for로, <label>의 for의 값과 양식의 id의 값이 같으면 연결이 된다.
Input 사용 예시
1. text
<form> <label for="username">Username:</label> <input id="username" name="username" type="text" placeholder="username"> <label for="password">Password:</label> <input id="password" name="password" type="password" placeholder="password"> <input type="submit"> </form>
Username: Password:
2. checkbox
<label for="checkbox">동의하십니까?</label> <input type="checkbox" id="checkbox" name="checkbox">
동의하십니까?
3. radio
<input type="radio" id="male" name="gender" value="male" checked><label for="male">남자</label> <input type="radio" id="female" name="gender" value="female"><label for="female">여자</label>
남자 여자
4. number
<label for="number">숫자범위:</label> <input type="number" min="0" max="10" step="1" value="1">
숫자 범위:
<min/max>태그를 통해 최소 값과 최고 값을 정할 수 있음
5. range
<input type="range" min="0" max="10" step="1" value="1">
볼륨:
textarea 태그
여러 줄에 해당하는 텍스트를 입력받을 때 사용
textarea 사용 예시
<label>자기소개</label><br><textarea rows="5" cols="20"></textarea>
자기소개
- name : 텍스트 영역의 이름
- rows : 텍스트 영역의 높이
- cols : 텍스트 영역의 너비
select 태그 & option 태그
드롭다운 리스트를 만들 때 사용(<select>태그 안에 <option>태그를 여러개 정의)
사용 예시
<select name="select_browser"> <option value="IE">익스플로러</option> <option value="FireFox">파이어폭스</option> <option value="Chrome">크롬</option> <option value="Opera">오페라</option> </select> <br> <input type="text" name="text_browser" list="datalist_browser" placeholder="브라우저"> <datalist id="datalist_browser"> <option value="IE">익스플로러</option> <option value="FireFox">파이어폭스</option> <option value="Chrome">크롬</option> <option value="Opera">오페라</option> </datalist>
익스플로러 파이어폭스 크롬 오페라
익스플로러 파이어폭스 크롬 오페라
<datalist>태그 :<input type="text">에 대한 옵션 목록을 정의
RN App Developer