07. 폼태그

 

1. 품 태그

- 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음
- 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용

 

 

• 기본형식

<form method="전송방법" action = '데이터를 받을 서버페이지'>   </form>

 

 

• 서버에 데이터를 전송하는 방법

예시) 네이버 주소 /search.naver --> 파일명 ?  where 뒤에는 전달할 데이터 & query 뒤에는 날씨 url

get : url에 데이터를 포함하여 전달하는 방법 (속도가 빠름 / 하이퍼링크 or 클릭으로 전송) post : 데이터를 body에 포함하여 전달하는 방법 (속도가 느림 / 폼태그에 입력된 것들을 전송)

 

 

2. Input 태그

 

 

- text: 문자를 입력받는 글상자 - password: 비밀번호를 입력받는 글상자 - radio: 여러 개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼            (그룹을 맺기 위해 name 속성의 값을 동일하게 함) - checkbox: 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼            (그룹을 맺기 위해 name 속성의 값을 동일하게 함) - file: 원하는 파일을 서버로 전송하기 위한 글상자 - button: 이벤트가 없는 일반 버튼 - reset: 입력받은 데이터를 초기화하는 버튼 (폼 안에 있는 데이터만 초기화) - submit: 입력받은 데이터를 서버에 제출하는 버튼 - hidden: 눈에 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자 ​ - email: 이메일을 입력받는 글상자(@ 필요) - url: 웹사이트를 입력받는 글상자(http 필요) - tel: 전화번호를 입력받는 글상자(모바일에서 숫자 키패드 사용) ​ - date: 원하는 날짜를 입력받는 글상자 - number: 원하는 숫자를 입력받는 글상자 <input type="number" min="최솟값" max="최댓값" step="증가값"> - search: 검색어를 입력받는 글상자 ​ - color: 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB 컬러 값으로 서버에 전달) - range: 일정 범위 안의 값만을 입력하는 조절바 <input type="range" min="최솟값" max="최댓값" value="현재값">

 

• 아이디 : text 

<p>아이디: <input type="text"></p>     <p>아이디: <input type="text" maxlength="20" ></p>       <p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요."></p>     <p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" ></p>     <p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" id="userid" ></p>    <p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" id="userid"                required></p>

1. 2. 3. 4. 백엔드와 연결하기 위해 name 사용 / 값을 찾아낼 때  5. 태그를 호출해서 기능을 넣을 수 있음 (태그의 값을 화면에 보여줘) 6. 필수적으로 입력

 

 

• 비밀번호 : password

비밀번호: <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요."                              name="userpw" id="userpw" required >

 

 

• 첨부파일 : file

첨부파일: <input type="file" >

• 이메일 : email   (잘 쓰이지 않음)

이메일: <input type="email" >

 

 

• 웹사이트 : url    (잘 쓰이지 않음)

웹사이트: <input type="url">     웹사이트: <input type="url" value='http://www.naver.com' >       웹사이트: <input type="url" value='http://www.naver.com' readonly>

입력이 되지 않음

 

• 전화번호 (폰에서 숫자키패드가 뜸)

전화번호: <input type="tel">

 

 

• 날짜 : date

생년월일: <input type="date">

 

• 숫자 : number

좋아하는 숫자: <input type="number" min="1" max="10" step=1>

 

• 능력치 : range

프로그램 능력: <input type="range" min="0" max="10" value="1">

 

 

 

 

3. label 태그

 

 

- 폼 양식에 이름을 붙이는 요소 - 다를 요소를 연결하면 해당 영역이 넓어짐 - radio, checkbox의 스타일을 설정 시 많이 사용됨 <label for='요소의 id'>텍스트 또는 이미지</label

 

 

• 선택 : radio - label for

성별: <input type="radio">        성별: 남자 <input type="radio" name="gender" value="남자">                여자 <input type="radio" name="gender" value="여자">        성별: <label for="male">남자</label>                                        <input type="radio" name="gender" value="남자" id="male">                     <label for="female">여자</label>                     <input type="radio" name="gender" value="여자" id="female" >          성별: <label for="male">남자</label>                                        <input type="radio" name="gender" value="남자" id="male">                     <label for="female">여자</label>                     <input type="radio" name="gender" value="여자" id="female" checked>

1.  2.name과 value 추가 3. label 넣으면 글자클릭가능 4. checked 넣으면 미리 선택되어 있음

 

 

• 체크박스 : checkbox

취미: <input type="checkbox">          취미:           운동 <input type="checkbox" name = "hobby1" value="운동">           게임 <input type="checkbox" name = "hobby2" value="게임">           낚시 <input type="checkbox" name = "hobby3" value="낚시">           영화감상<input type="checkbox" name = "hobby4" value="영화감상">           음악듣기 <input type="checkbox" name = "hobby5" value="음악듣기">          취미: <label for="hobby1"> 운동 </label>                     <input type="checkbox" name="hobby" id="hobby1" value="운동" >                     <label for="hobby2"> 게임</label>                     <input type="checkbox" name="hobby" id="hobby2" value="게임">                     <label for="hobby3">낚시</label>                     <input type="checkbox" name="hobby" id="hobby3" value="낚시">                     <label for="hobby4">영화감상</label>                     <input type="checkbox" name="hobby" id="hobby4" value="영화감상">                    <label for="hobby5"> 음악듣기 </label>                    <input type="checkbox" name="hobby" id="hobby5" value="음악듣기">

 

 

 

5. 선택상자 태그

 

 

- 여러 개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택 ​ <select name='뭐시기 key값'> <option value='kim'>사과</option> <option value='van'>바나나</option> <option value='oh'>오렌지</option> </select>

 

• 옵션선택 : select name - option value

<p>직업:                 <select name="job" >                     <option value="프로그래머">프로그래머</option>                     <option value="공무원">공무원</option>                     <option value="전문직">전문직</option>                     <option value="취준생">취준생</option>                     <option value="학생">학생</option>                     <option value="주부">주부</option>                 </select>

 

 

 

 

 

 

6. 버튼 태그

 

 

- <button></button> - value 속성이 없기 때문에 태그 사이에 제목을 설정 <button>클릭하세요</button> - 기본 속성은 submit <button type='button'>클릭하세요</button> <button type='reset'>클릭하세요</button> <button type='submit'>클릭하세요</button>

 

• 버튼 : button

<input type="button">    <input type="button" value = '버튼'>    <input type="reset" value = '리셋'>

웹이 초기화됨

 

 

 

• 전송 : submit

<input type="submit" value = '전송'>

값이 전송됨

 

 

 

• 버튼 (전송기능, 기본기능)

<button>버튼</button>     <button type = 'button'>버튼</button>

submit이랑 같은 기능   기본 버튼 기능

 

• 이미지로 버튼만들기

<button> <img src="./img/btnMember.jpg" alt="중복확인:"> </button>

 

 

 

 

• onclick 추가

<input type="button" value = '버튼' onclick="alert('안녕하세요')">

javascript에서 기능 추가

 

 

 

 

 

 

7. 글상자 태그

 

- 여러 줄의 텍스트를 입력받는 글상자 <textarea cols='가로 글자수' rows='세로 줄 수'>value설정값</textarea>

 

• 글칸: textarea 

<p>자기소개:</p>             <p><textarea name="content" cols="50" rows="5"></textarea></p>

 

 

8. 속성

 

 

maxlength: 값의 최대 길이를 설정 placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정 name: 요소에 이름을 설정. 서버에서 값을 전달받을 때 key로 사용 id: 요소의 유일한 이름을 설정. HTML 문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용(HTML 문서 내에서 다른 요소와 같은 id를 가질 수 없음) value: 서버로 전달할 입력 양식의 값을 설정 checked: 라디오 또는 체크박스 중에서 미리 선택하는 값을 설정 readonly: 데이터를 볼 수 있으나 수정할 수 없게 설정 (서버로 데이터 전달됨) disabled: (발음: 디저블...) 입력 필드를 사용할 수 없게 설정(서버로 데이터 전달되지 않음) required: 데이터를 submit할 때 데이터를 필수로 입력하도록 강제함