폼 태그

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

<form action='서버에게 전달할 파일 위치' method='전송방법'>
form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>

 

전송방법(method)

• get: URL에 데이터를 포함하여 전달
• post: body에 데이터를 포함하여 전달

 

input 태그: 입력 상자

type 속성

• text: 문자를 입력받는 글상자

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

text 속성

 

• password: 비밀번호를 입력받는 글상자

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

password 속성

 

• radio: 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼
• ㄴ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함

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

radio 속성

 

• checkbox: 여러개의 옵션을 선택할 수 있도록 하는 버튼
• ㄴ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함

<p>
취미: 
<input type="checkbox" name="hobby" value="운동"> 운동 
<input type="checkbox" name="hobby" value="음악감상"> 음악감상 
<input type="checkbox" name="hobby" value="영화감상"> 영화감상 
<input type="checkbox" name="hobby" value="게임"> 게임
<input type="checkbox" name="hobby" value="등산"> 등산
</p>

checkbox 속성

 

• file: 원하는 파일을 서버로 전송하기 위한 글상자

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

file 속성

 

• button: 이벤트가 없는 일반 버튼
• reset: 입력받은 데이터를 초기화하는 버튼
• submit: 입력받은 데이터를 서버에 제출하는 버튼

<p>
    <input type="button" value="클릭하세요" onclick="alert('안녕?!')">
    <input type="reset" value="다시입력"> <input type="submit" value="회원가입">
    <button type="reset">버튼 클릭</button>
</p>

button 속성

 

• email: 이메일을 입력받는 글상자(@ 필요)

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

email 속성

 

• url: 웹사이트를 입력받는 글상자(http 필요)

<p>웹사이트: <input type="url"></p>

url 속성

 

• tel: 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)

<p>휴대폰번호: <input type="tel"></p>

tel 속성

 

• date: 원하는 날짜를 입력받는 글상자

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

date 속성

 

• number: 원하는 숫자를 입력받는 글상자
• ㄴ <input type="number" min="최소값" max="최대값" step="증가값">

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

number 속성

 

• color: 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB 컬러값으로 서버에 전달)

<p>좋아하는 색상: <input type="color"></p>

color 속성

 

• search: 검색어를 입력받는 글상자

<p>검색어: <input type="search"></p>

search 속성

 

• range: 일정 범위 안의 값만을 입력하는 조절바
• ㄴ <input type="range" min="최소값" max="최대값" value="현재값">

<p>프로그래밍 능력: <input type="range" min="1" max="5" value="3"></p>

range 속성

 

• hidden: 보이지는 않으나, 서버에 값을 전달하고 싶을 때 사용하는 글상자

<input type="hidden" name="hidden" value="서버로 전달될 값">

 

속성

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

 

라벨 태그

• 폼 양식에 이름을 붙이는 요소
• 다른 요소를 연결하면 해당 영역이 넓어짐
• radio, checkbox의 스타일을 설정시 많이 사용됨
• readonly: 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)
• disabled: 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
• required: 데이터를 submit할 때 데이터를 필수로 입력하도록 강제하는 설정

<label for="요소의 id">텍스트 또는 이미지 </label>

 

버튼 태그 

• 버튼을 생성하는 요소
• type="reset", type="button", type="submit" (기본값)

<button>버튼클릭</button>

 

선택상자

• 여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택

<select>
    <option value="apple">김사과</option>
    <option value="banana">반하나</option>
    <option value="orange">오렌지</option>
</select>

 

여러줄 글상자

• 여러줄의 텍스트를 입력받는 글상자
• value 위치 조심!

<textarea cols="가로 글자수" rows="세로 줄수">value</textarea>