Form

<form>은 사용자가 웹사이트로 정보를 보내기 위해 사용한다.

form 태그의 속성

method : specify which HTTP method should be used 사용자가 입력한 내용들은 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정(get/post)

• get : 주소 표시줄에 사용자가 입력한 내용 드러남, 256byte~4,096byte
• post : 많이 쓰이는 방식, 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이 제한 없고, 입력한 내용이 드러나지 않음

name : 폼의 이름 지정, 여러 개의 폼 태그를 구분하기 위해 사용
action : specify where the form data should be sent, when the form is submitted, 폼 태그 안의 내용을 처리해 줄 서버 상의 프로그램을 지정
target : action 태그에서 지정한 스크립트 파일을 새로운 위치에서 열도록 지정

예시

Input

input을 통해 사용자가 직접 값을 입력할 수 있다. 닫는 태그 없다.

<form>
    <input type="text" placeholder="username" name="username">
    <input type="password">
    <input type="color">
    <input type="number">
</form>

input 태그의 속성

type : <input> 태그의 유형을 설정 (input 유형 MDN)
placeholder : 사용자가 무엇을 입력해야 하는지 알려주는 역할
name : 폼이 제출될 때 서버로 전달되는 이름을 설정

label으로 input 의미 정의하기

<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

<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과 name 속성을 활용하여 구글 검색하기

action에 구글 검색 URL, name 값에 q 입력
action 값과 name 값은 사이트마다 다름

<form action="https://www.google.com/search">
    <input type="text" name="q">
    <button>Search Google</button>
</form>

checkbox

자유롭게 선택, 철회가 가능하다. 다중선택 데이터를 받을 때 사용한다.

<form>
    <input type="checkbox" name="agree_tos" id="agree">
    <label for="agree">I agree to everything</label>
</form>

radio button

여러 개의 선택지 중에 한가지를 선택해야 할 때 사용된다. 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

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 Validations

required

아무것도 입력하지 않으면 제출이 불가

<form>
    <label for="first">Enter First Name</label>
    <input type="text" name="first" id="first" required>
    <button>Submit</button>
</form>

minlength, maxlength

입력값의 최소길이와 최대길이 설정

<form>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" minlength="5" maxlength="20" required>
    <button>Submit</button>
</form>

email, url

email 또는 url 형식에 맞게 입력

<form>
    <input type="email" required>
    <input type="url" required>    
</form>