[HTML] Form & Input & button

✔ HTML 입력 양식(form,Input,button)

Form

Input과 button의 상위 태그로, 사용자로부터 데이터를 입력받을 때 사용한다.

   <form>
        <textarea name="text" id="" cols="30" rows="10"></textarea>
        <div>
            <button type="button">클릭</button>
            <button type="submit">제출</button>
            <button type="reset">리셋</button>
        </div>
    </form>

Input

Form의 자식태그로, 다양한 타입이 존재한다.

1. 텍스트 입력(text)
2. 비밀번호 입력(password)

<form>

    사용자 : <br><input type="text" name="username"><br>

    비밀번호 : <br><input type="password" name="password">

</form>

3. 라디오 버튼(radio)

 <label><input type="radio" name="fruits">football</label>
    <label><input type="radio" name="sports">baseball</label>
    <label><input type="radio" name="sports">basketball</label>
    <label><input type="radio" name="sports">tennis</label>

4. 체크박스(checkbox)

<label><input type="checkbox">운동</label>
    <label><input type="checkbox">공부</label>
    <label><input type="checkbox">물 마시기</label>
    <label><input type="checkbox">장 보기</label>
    <label><input type="checkbox">조카 놀아주기</label>

5. 파일 선택(file): 사용자로부터 파일 전송받기
6. 선택 입력(select): 드롭다운 리스트(drop-down list)중에서 단 하나의 옵션만을 입력
7. 문장 입력(textarea): 여러 줄의 텍스트를 입력
8. 버튼 입력(button): 누를 수 있는 버튼 생성
9. 전송 버튼(submit): 입력받은 데이터를 서버의 폼 핸들러로 제출하는 버튼
10. 필드셋(fieldset): form 요소와 관련된 데이터들을 하나로 묶어주는 역할
11. 숫자 입력(number): 숫자의 크기를 조절할 수 있는 상하 버튼 생성
12. 입력 범위 지정(range): 값을 선택하기 위한 수평 조절바 생성
13. 색상 입력(color): 색상 파레트 생성
14. 날짜 입력(date): 날짜를 선택하기 위한 캘린더 생성
15. 시간 입력(time): 시간을 선택하기 위한 도구 생성
16. 날짜와 시간 입력(datetime-local): 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구 생성
17. 연도와 월 입력(month): 연도와 월을 선택하기 위한 캘린더 생성
18. 연도와 주 입력(week): 연도와 주를 선택하기 위한 캘린더 생성
19. 이메일 입력(email): 입력한 email 주소가 유효한 email 주소인지 검사
20. URL 주소 입력(url): 입력한 URL 주소가 유효한 URL 주소인지 검사
21. 전화번호 입력(tel)
22. 검색어 입력(search): 보통의 텍스트 필드(text field)와 동일하게 동작, 검색어를 삭제할 수 있는 엑스(X)도 같이 생성

✔ button(button, sumbit, reset)

Form의 자식태그로, button, sumbit, reset 총 3가지의 타입을 가진다.


button: 클릭을 할 수 있는 버튼. 기능은 javascript로 직접 구현한다.
sumbit: 서버로 데이터를 전달하는 버튼(default값이 submit). ex) 로그인, 회원가입, 글 작성 버튼
reset: 초기화 버튼, 클릭 시 button을 감싸고 있는 form 내의 모든 데이터를 초기화한다.

form & input의 속성, method는 나중에 따로 정리

Reference:
http://tcpschool.com/html/html_input_forms
http://tcpschool.com/html/html5_element_inputtype
Reference: 코드스테이츠