웹사이트에서 데이터를 받기만 하는 것이 아니라 내 데이터를 웹사이트에 보내기도 해야하는 데 이때 폼을 사용한다.
기본적인 폼의 형태
<form>
<label for="username">아이디</label>
<input id="username" name="username">
<label for="password">비밀번호</label>
<input id="password" name="password" type="password">
<button>로그인</button>
</form>라벨 <label>
<label> </label> 태그로 <input> 태그를 감싸면 라벨을 클릭했을 때 인풋에 포커싱이 된다.
<label>
아이디
<input name="...">
</label>또는 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱이 된다.
<label for="username">아이디</label>
<input id="username" name="...">인풋 <input>
name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름이다.
예를 들 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭된다.
<label for="...">아이디</label>
<input id="..." name="username">type 속성을 사용하면 다양한 인풋을 사용할 수 있다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용한다.
<label for="password">비밀번호</label>
<input id="password" name="password" type="password">버튼 <button>
입력한 내용을 웹사이트에 전송해준다.
<button> </button> 태그를 사용해 버턴을 만들어 준다.
버튼에도 여러 동작이 있다. 기본 동작은 데이터를 전송하는 것이지만 type="reset" 은 입력받은 내용을 리셋하고, type="button" 은 아무 동작안하고 그냥 눌리기만 한다.
<button type="submit"> <!--기본 동작: 전송-->
확인
</button>
<button type="reset">
취소
</button>
<button type="button"> <!-- 아무 동작 안함-->
이름만 버튼
</button>체크박스 checkbox
한 항목만 선택하는 경우
아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정된다.
<label>
<input name="agreement" type="checkbox">
동의합니다
</label>여러 항목 중 몇 항목을 선택하는 경우
<input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰인다.
예를 들어 아래 코드에서는 "만두"이랑 "짜장면"를 선택했을 때 menu의 값으로 mandu와blacknoodle라는 문자열이 지정된다. 폼을 전송했을 때 쿼리 문자열에서는 &ㅡmenu=mandu&menu=blacknoodle처럼 전송된다.
<label for="film">좋아하는 중식 메뉴</label>
<label>
<input type="checkbox" name="menu" value="mandu"> 만두
</label>
<label>
<input type="checkbox" name="menu" value="blacknoodle"> 짜장면
</label>
<label>
<input type="checkbox" name="menu" value="jjambbong"> 짬뽕
</label>날짜 date
선택한 날짜로 값을 지정할 수 있다.
<input name="birthdate" type="date">파일 file
파일을 선택할 수 있는 인풋이다.
<input name="avatar" type="file">파일 형식 지정하기
accept 라는 속성을 사용해 파일 확장자들을 정해줄 수 있다.
<input name="avatar" type="file" accept=".png,.jpg">파일 개수 지정하기
multiple 이라는 참/거짓 속성을 사용해 여러 개 또는 한 개만을 선택하도록 정할 수 있다.
<input name="photos" type="file" multiple> <!-- 여러 개 선택 가능 -->
<input name="avatar" type="file"> <!-- 한 개만 선택 가능 -->이메일 email
텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사해준다.
<input name="email" type="email">숫자 number
숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있다.
<input type="number">
<!-- 100에서 1000사이 -->
<input type="number" min="100" max="1000">
<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">비밀번호 password
값을 입력했을 때 입력한 내용이 가려진다.
<input type="password">라디오 radio
동그란 선택 버튼이다. 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있다.
value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input>의 value 값을 입력하도록 할 수 있다.
예를 들어 아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어가게 된다.
<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>범위 range
범위 안에서 선택할 수 있는 인풋이다.
<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">텍스트 text
인풋 타입의 기본 값이다. 일반적인 텍스트를 입력할 때 사용한다.
<input name="nickname" type="text">옵션 선택 <select>
미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그다. <select> 태그 안에 <option> 태그를 value와 함께 사용하면 된다.
예를 들어 아래 코드에서 드라마를 선택하면 genre의 값이 drama가 된다.
<label for="genre">장르</label>
<select id="genre" name="genre">
<option value="korean">한국 영화</option>
<option value="foreign">외국 영화</option>
<option value="drama">드라마</option>
<option value="documentary">다큐멘터리</option>
<option value="vareity">예능</option>
</select>긴글 <textarea>
긴 글을 입력할 수 있는 인풋이다. <input> 태그와 달리 반드시 종료 태그 </textarea> 를 써주어야 한다.
<textarea name="content"></textarea>값이 비어있을 때 보여주는 값 placeholder
값이 비어있는 인풋에 설명이 적혀있는 것을 "플레이스홀더" 라고 부른다.
이런 값을 추가하려면 placeholder 속성을 사용하면 된다.
<input name="username" placeholder="이메일 또는 휴대전화">이때, placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 사용하면 된다.
input::placeholder {
color: #dddddd;
}반드시 입력해야 하는 값 required
폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 사용하면 된다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않는다.
<input name="email" type="email" required>자동 완성 autocomplete
예전에 입력한 값들을 보여주는 인풋이다. autocomplete 속성을 사용하면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해준다.
<input name="search" type="text" autocomplete="on">👆🏻 참고로 required 와 달리 on 이라는 값을 지정해 주어야 동작한다.
만약에 이메일을 채워 넣게 하고 싶다면 email이라는 값을 쓸 수 있고, 전화번호를 채워 넣고 싶다면 tel이라는 값을 쓸 수 있다. 이런 건 특히 스마트폰으로 사이트를 접속했을 때 유용하다. 👇🏻
<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">