<form>
은 사용자가 웹사이트로 정보를 보내기 위해 사용한다.
method
: specify which HTTP method should be used 사용자가 입력한 내용들은 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정(get/post)
get
: 주소 표시줄에 사용자가 입력한 내용 드러남, 256byte~4,096bytepost
: 많이 쓰이는 방식, 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이 제한 없고, 입력한 내용이 드러나지 않음name
: 폼의 이름 지정, 여러 개의 폼 태그를 구분하기 위해 사용
action
: specify where the form data should be sent, when the form is submitted, 폼 태그 안의 내용을 처리해 줄 서버 상의 프로그램을 지정
target
: action
태그에서 지정한 스크립트 파일을 새로운 위치에서 열도록 지정
예시
input
을 통해 사용자가 직접 값을 입력할 수 있다. 닫는 태그 없다.
<form>
<input type="text" placeholder="username" name="username">
<input type="password">
<input type="color">
<input type="number">
</form>
type
: <input>
태그의 유형을 설정 (input 유형 MDN)
placeholder
: 사용자가 무엇을 입력해야 하는지 알려주는 역할
name
: 폼이 제출될 때 서버로 전달되는 이름을 설정
<label>
: 폼의 양식에 이름을 붙이는 태그, 주요 속성은 for
이다. label
의 for
의 값과 양식의 id
의 값이 같으면 연결이 된다.
<form>
<label for="username">Username:</label>
<input id="username" type="text" placeholder="username" name="username">
</form>
<label>
안에 <input>
을 중첩시킬 수 있다. 이 경우 연관이 암시적이므로 for
및 id
속성이 필요없다.
<form>
<label for="password">Password:
<input id="password" type="password" placeholder="password" name="password">
</label>
</form>
<button>
을 통해 <input>
을 이용하지 않고 버튼을 생성할 수 있다.
<button>
요소 안에서는 텍스트나 이미지 같은 내용을 넣을 수 있다.
type
값을 지정하지 않으면 form의 내용이 제출(submit)된다.
<form>
<button>Submit!</button>
<input type="submit" value="Submit!">
</form>
type
값을 button으로 지정하면 제출되지 않는다.
<form>
<button type="button">This is a button(won't submit)</button>
</form>
action
에 구글 검색 URL, name
값에 q 입력
action
값과 name
값은 사이트마다 다름
<form action="https://www.google.com/search">
<input type="text" name="q">
<button>Search Google</button>
</form>
자유롭게 선택, 철회가 가능하다. 다중선택 데이터를 받을 때 사용한다.
<form>
<input type="checkbox" name="agree_tos" id="agree">
<label for="agree">I agree to everything</label>
</form>
여러 개의 선택지 중에 한가지를 선택해야 할 때 사용된다. name
으로 여러 선택지를 한가지 질문으로 묶어준다. value
로 선택되었을 때 전달될 값을 설정한다.
<form>
<label for="xs">XS:</label>
<input type="radio" name="size" id="xs" value="xs">
<label for="s">S:</label>
<input type="radio" name="size" id="s" value="s">
<label for="m">M:</label>
<input type="radio" name="size" id="m" value="m"> </form>
select
는 선택할 수 있는 목록을 만들 때 사용한다.(드롭다운 박스) 목록의 내용은 option
태그로 만든다.
<form>
<label for="meal">Please Select an Entree</label>
<select name="meal" id="meal">
<option value="fish">Fish</option>
<option value="veg">Vegetarian</option>
<option value="steak">Steak</option>
</select>
</form>
아무것도 입력하지 않으면 제출이 불가
<form>
<label for="first">Enter First Name</label>
<input type="text" name="first" id="first" required>
<button>Submit</button>
</form>
입력값의 최소길이와 최대길이 설정
<form>
<label for="username">Username</label>
<input type="text" name="username" id="username" minlength="5" maxlength="20" required>
<button>Submit</button>
</form>
email 또는 url 형식에 맞게 입력
<form>
<input type="email" required>
<input type="url" required>
</form>