HTML input 태그 : form / input / label / select / textarea

form 폼 태그

사용자로부터 직접적으로 데이터를 입력 받아서 서버로 데이터를 전송해주는 태그

<form></form> 태그 안에 여러 폼 요소를 삽입해 사용한다.

 

 

 

form 태그 속성

method : 사용자가 입력한 내용들을 서버 쪽에 어떻게 넘겨줄지 지정한다. (get, post)
- get : 주소 url 에 사용자가 입력한 내용이 name과 함께 표시된다.
- post : 사용자 입력 내용이 url로 드러나지 않는다. 전송, 길이 제한 없다.
name : 폼 이름 지정하는 태그 / name속성을 써야 데이터가 전달 된다.
action : 입력한 데이터를 전송할 서버페이지 url
target : 현재 창이 아닌 다른 위치에 열도록 지정할 수 있다.

 

 

input 태그

form 태그안에 추가할 수 있는 입력 요소 / 필수 속성 : type

사용자에게 데이터를 입력을 받을 수 있는 필드를 생성하는 태그로 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다. type에 따라 동작 방식이 달라진다.

 

 

 

input type

<input type="text"> : 텍스트를 입력받는다 (input type의 기본값)

<input type="password"> : 텍스트를 입력받으면 * 으로 표시된다.

<input type="button"> : 버튼

<input type="submit"> : 제출 버튼

<input type="checkbox"> : 임의의 개수 체크할 수 있는 체크박스

<input type="radio"> : 하나만 체크할 수 있는 라디오버튼

<input type="number"> : 숫자 입력, 조절할 수 있는 필드

<input type="date"> : 연도, 월, 일

<input type="datetime-local"> : 연도, 월, 일, 시간

<input type="week"> : 연도, 주

<input type="month"> : 연도, 월

<input type="time"> : 시간

<input type="email"> : @를 포함한 텍스트 입력

<input type="file"> : 파일 선택해서 첨부 / 파일전송은 form  method가 post여야 한다.

<input type="hidden"> : 사용자에게는 보이지 않지만 서버로 넘겨지는 값

<input type="image"> : submit 버튼 대신 사용할 이미지

<input type="color"> : 색상입력 or 색상선택기 표시

<input type="range"> : 슬라이더 / 숫자 조절이 가능한 슬라이드 막대

<input type="reset"> : 폼에 작성된 내용을 전부 삭제하는 리셋 버튼

<input type="search"> : 검색 필드

<input type="tel"> : 전화번호 입력 필드이지만 숫자만 입력해야하는 규제는 없다.

<input type="url"> : http://로 시작하느 사이트 주소 입력

 

 

 

 

Input 속성 

disabled	입력할 수 없도록 설정 / 서버로 전송 X
max	최대값 설정 (number 타입에서만 사용)
maxlength	문자 최대 길이 설정
min	최소값 설정 (number 타입에서만 사용)
minlength	문자 최소 길이 설정
pattern	일치해야 하는 패턴 설정
readonly	입력만 가능하도록, 수정 불가능 / 서버로 전송 O
required	반드시 입력해야하도록 설정
size	input 필드 사이즈 설정
step	입력할 수 있는 숫자들 사이의 간격을 명시 (number 타입에서만 사용)
value	input tag에 미리 입력할 내용, 기본값
placeholder	입력할 자리에 값이 없을 때 나타나는 내용, 값이 입력되면 사라진다.
autofocus	해당 태그를 입력 가능한 상태로 만들어줌 (커서 둔 상태)
name	서버로 전송할 input 요소의 이름

 

 

 

    <form action="" method="get">
            <input type="url" name="id" placeholder="아이디를 입력해주세요" 
            maxlength="20" minlength="5" autofocus><br>
            <input type="password" name="passwd" required placeholder="암호를 입력해주세요"><br>
            <input type="text" name="name" value="홍길동" readonly>
            <button>로그인</button>

button 타입의 기본은  submit이다.

 

 

 

label 태그

폼 요소에 이름(텍스트)을 붙이는 태그

label의 for의 값과 양식의 id의 값이 같으면 연결된다.

label에 입력된 텍스트를 클릭했을 때 연결된 태그에 입력할수 있도록 하거나, 체크/체크해제할 수 있도록 하는 것이다.

 

 

 <form action=""> 
        <input type="checkbox" name = "hobby" value="게임" id = "game" checked>
        <label for="game">게임</label> 
        <input type="checkbox" name = "hobby" value="등산" id = "hiking">
        <label for="hiking">하이킹</label> 
        <br>
        <button>제출</button>
    </form>

value를 각각 입력해서 데이터가 전송될때 각각의 value로 구분될 수 있다.

태그를 구분하기 위한 id를 각각 입력했고, label 태그에 id를 연결했기 때문에 체크박스뿐만아니라 게임, 하이킹이라는 글자를 클릭해도 체크/해제가 된다.

checked는 미리 체크해 놓는 속성이다.

 

 

<form action="">  
		<label for="id">아이디</label>
        <input type="text" id="id">  
</form>

"아이디" 텍스트를 label로 id에 연결했기 때문에 "아이디" 텍스트를 클릭해도 text를 입력할 수 있는 상태가 된다.

 

 

 

    <form action=""> 
        가입약관 동의 여부 : <input type="radio" name="yn" value="yes" > 예
        <input type="radio" name="yn" value="no" checked> 아니오
        <button>제출</button>
    </form>

radio는 하나만 선택하도록 할 수 있는 라디오버튼이다. name이 동일해야 그룹으로 묶이고, 그룹중에 하나만 체크가 될 수 있다. 선택 값은 value값으로 구분되어 전송된다. 반드시 체크가 되도록 no에 미리 checked로 선택해 두었다.

 

 

 

 

select 

<select name="">
<option value="">  </option> 
</select>

 

아래로 펼쳐지는 목록 상자를 만드는 태그

select 에서 전송되는 값은 option의 value 속성이며 selected 이용해서 기본적으로 선택할 항목 지정할 수 있다.

        <select name="tel" id="">
        <option value="-">선택하세요</option>
            <option value="010">010</option>
            <option value="011">011</option>
            <option value="016">016</option>
            <option value="017">017</option>
            <option value="018">018</option>
            <option value="019">019</option>
        </select><br>

선택된 값의 value가 전송된다.

 

 

 

 

textarea

사용자가 텍스트를 입력할 수 있는 텍스트 입력 상자 정의하기 위한 태그

 

 

 <textarea name="" id="" cols="30" rows="10"> 미리 입력 될 텍스트 </textarea>

 

cols : 컬럼개수, rows : 라인수 이지만 디자인은 css에서 조정하면 된다.

input 태그의 text타입 상자에서 쓰던 속성을 모두 사용할 수 있다.

<textarea>와 </textarea>에는 미리 입력될 텍스트가 지정되기 때문에 사이에 띄어쓰기가 들어가면 인식되어 미리 입력되므로 주의해야 한다.