HTML form 요소

form 요소란?

form은 클라이언트가 입력하거나 선택한 정보를 서버에 전송할 양식이다.

 

 

form 요소의 기본 양식 2가지

                <label>

                    <input type="checkbox" name="hobby" value="soccer"> 축구

                </label>

 

        <form action="login.jsp">

                <label for="email">이메일</label>

                <input type="text" id="email" name="email">

                <label for="pwd">비밀번호</label>

                <input type="password" name="pwd" id="pwd">

                <button type="submit">로그인</button>

        </form>

action : form이 submit 되었을 경우 데이터가 전송되는 주소, 경로를 의미함.

 

label : for 속성의 값과 input 의 id 속성의 값과 동일하게 작성이 되어야 한다.

 

input : 사용자가 입력할 수 있는 공간을 만들어주는 인라인 요소이다.

input에 사용할 수 있는 다양한 속성이 존재한다.

1-1 type

이 속성을 통해 해당 input이 어떠한 기능을 갖는 태그인지 명시 할 수있다.

-input type (text, password, file, color, range, date, time, datetime-local, number, email, ...)

 

1-2 name

서버에서 필요한 값

 

1-3 maxlength

해당 요소의 최대 글자 수를 지정

 

1-4 required

해당 요소를 필수요소로 지정

 

button : 클릭 가능한 버튼을 나타낸다. (데이터를 서버로 전송할때 주로 사용됨)
button type 종류 

button : 클릭할 수 있는 버튼이 브라우저에 생성되며 클릭해도 아무런 기능이 없음(자바스크립트나 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 동작이 가능하다.

submit : 서버로 데이터를 전달하는 역할

reset : form 데이터의 입력된 데이터를 기본값으로 초기화하는 역할

 

 

fieldset, legend

1-1 fieldset 

form 안에서 form 요소들을 그룹화 할때 사용한다.

 

1-2 legend

fieldset 하위에서 그룹화한 form 요소들에 대해 목적에 맞는 이름을 지정한다.

 

 

select, option, optgroup

1-1 select

항목을 선택할 수 있는 드롭다운 메뉴를 보여주는 인라인 요소.

선택되었을 경우에 대비하여 value 속성을 가진다.

지정된 value 값이 없을경우 텍스트 값으로 사용한다.

 

1-2 option

select, optgroup, datalist 요소의 항목을 정의

 

1-3 optgroup

select 태그 안의 목록들을 그룹화할경우에 사용한다.

optgroup 하위에 option요소들이 포함

 

 

textarea : 여러줄을 입력받기 위해 사용하는 인라인 요소

textarea의 기본값을 설정하고 싶으면 textarea의 innerText로 입력을 해놓아야 한다.