TIL 02 | HTML, form과 input

HTML에서 빠질 수 없는 Form과 Input 태그에 대해서 알아보자!

Form 태그

<form> 은 사용자가 입력한 데이터를 서버로 전송하기 위해 사용한다.

<form action=“/my-form-submitting-page” method=“post”>
<!-- All our inputs will go in here -->
</form>

• action - where the form send data to
• method - the type of HTTP request(get/post)
• form 태그는 block class 이다.

<form> 안에는 한개 이상의 아래와 같은 element가 포함될 수 있다.

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <fieldset>
• <label>
• <output>

Input 태그

사용자가 직접 입력할 수 있는 <input> 에는 다양한 타입이 존재한다.

Input에 Label 붙이기

<label> 은 <form> 의 양식에 이름을 붙이는 태그다. 주요 속성은 for로, <label>의 for의 값과 양식의 id의 값이 같으면 연결이 된다.

<form>
    <label for="username">Username:</label>
        <input id="username" name="username" type="text" placeholder="username">
    <label for="password">Password:</label>
        <input id="password" name="password" type="password" placeholder="password">
    <input type="submit">
</form>

Username: Password:

위 코드에서 placeholder 란 사용자가 입력하기 전에 창에서 보이는 기본 콘텐츠를 의미한다.

Form Validations

<form action="http://wikipedia.com" method="get">
    <label for="username">Email:</label>
        <input id="username" name="username" type="Email" placeholder="Email" required="">
    <label for="password">Password:</label>
        <input id="password" name="password" type="password" placeholder="password" required>
    <input type="submit">
</form>

Email: Password:

• type를 Email로 설정하여 형식에 맞는 인풋을 요구할 수 있다.
• required - 창을 비운 상태에서 submit이 불가능하다.

Checkbox

<label for="still">코딩이 재밌니?</label>
<input type="checkbox">

코딩이 재밌니?

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

Radio Buttons

<p>Do you prefer cats of dogs?</p>
<form>
    <label for="dogs"> Dogs: </label>
    <input name="perChoice" id="dogs" type="radio" value="dogs">
    <label for="cats"> Cats: </label>
    <input name="perChoice" id="cats" type="radio" value="cats">
</form>

Do you prefer cats of dogs?

Dogs: Cats:

여러 개의 선택지 중에 한가지를 선택해야 할 때 사용된다. input name 으로 여러 선택지를 한가지 질문으로 묶어준다.

Dropdowns

<p>What's your favorite color?</p>
<form>
    <select name="color">
        <option>Red</option>
        <option>Orange</option>
        <option>Yellow</option>
    </select>
</form>

드롭다운 메뉴로 여러가지 주어진 옵션 중 한가지를 고르게 하는 방식이다. 날짜, 국가 등 한정된 많은 데이터에서 한가지를 선택할때 주로 사용된다.

value

<p>지금 기분이 어때?</p>
<form>
    <select name="mood">
        <option value="happy">:)</option>
        <option value="neutral">:|</option>
        <option value="sad">:(</option>
    </select>
    <button>Go!</button>
</form>

• value를 설정해주면 선택한 답에 대한 정보를 url에서 볼 수 있다.
• 인풋에 따라 붙는 버튼은 <input type="submit"> 이 없어도 모두 submit의 기능을 한다.

응용하기

<form>
	<input type="text">
	<textarea name="paragraph" rows="20" cols="50"></textarea>
</form>

텍스트박스 형식의 인풋은 박스 크기를 rows, cols로 설정 가능하다.