[HTML]입력태그 <form> <input> <textarea> <label>

<form> 

▶입력 양식 전체를 감싸는 태그

▶form은 컨트롤 요소로 구성된다. 

 

☆속성

• name:  form의 이름
• action : form 데이터가 전송되는 백엔드 url
• method : 전송방식 선택, get: 256~4096byte까지만 전송가능, post: 길이제한 없음!
• autocomplete: 자동완성, on으로 명시하면 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다. 

<input>

▶form 태그 내부에있는 태그

▶사용자가 정보를 입력하는 부분을 만들때 사용한다.

▶type에 따라 어떤 형식으로 정보를 받을지 결정한다. id값을 통해 구분할수도 있다.

☆input 속성

• readonly: 읽기전용 필드로 만들기
• placeholder: 힌트표시, 필드클릭시 내용 사라짐
• maxLength: 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
• required: 필수입력 필드 , 빈칸이면 다음으로 안넘어감
• type: input 태그의 타입을 지정.

input type의 속성

• text: 한줄짜리 텍스트를 입력할 수 있는 텍스트 상자
• hidden: 서버로 보내는 값들을 보내는 필드, 사용자에게는 보이지 않는다.
• search: 검색 상자
• submit: 서버전송버튼
• tel: 전화번호 입력필드
• url: 주소입력피드
• email: 메일주소 입력필드, @가 들어갔는지 안들어갔는지 검사해준다. @없이 썼다면 인정이안됨.
• number: 숫자를 조절할 수 있는 화살표 
• range: 숫자 범위를 조절할 수 있는 슬라이드 막대
• color: 색상표
• checkbox: 체크박스( 2개이상 선택 가능)
• radio: 라디오버튼(1개만 선택가능)
• datatime: 날짜와 시간( 연 월 일 시 분 초 분할초)
• datetime-local: 사용자가 있는 지역을 기준으로 한 날짜와 시간(연 월 일 시 분 초 분할초)
• date: 사용자 지역을 기준으로 한 날짜(연 월 일)
• month: (연, 월)
• week: 연, 주 
• time: 시 분 초 분할초

<textarea>

▶textarea 는 input 의 text타입과 비슷한 형태이다. 하지만 text 타입은 한줄만 가능하다.

▶textarea는 긴 내용을 입력하는 것이 가능하다. 

<form>
    <textarea name="option" cols="30" rows"5" placeholder="여기에 써주세요~">
    </textarea>
    <br>
    <input type="submit">
</form>

 

 

<label>

▶input의 checkbox에서는 동그라미 버튼을 눌러야만 선택이 되었다.

▶label을 써주면 텍스트영역을 눌러도 선택이 된다. "더 쉽게 선택할 수 있다"는 장점이 있다.

<form>
	<p>
    	<label for="name_txt">text:</label>
        <input id="name_txt" type="text" name="id" value="default">
    </p>
    <p>
        <input id="color_red1" type="radio" name="color" value="default">
        <label for="color_red1">red</label>
        
        <input type="radio" name="color" value="default">blue
    </p>
</form>

위 코드를 보면, 라벨로 감싸준 text 와 red 선택부분은 글씨부분을 눌러도 선택이 된다.

하지만 input 으로만 감싸준 blue 부분은 선택영역 동그라미를 눌러야만 선택이 될 수 있다.