HTML - Form 요소
<form> 태그
정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다
<form name="profile" action="/action_page.php" method="get">
<input type="text" name="id" placeholder="form형식 예시">
</form>
✔ action 속성 : form을 보낼 목적지 주소
✔ method 속성 : form을 제출할 때 사용할 HTTP 메서드 (post, get)
<label> 태그
input과 쌍을 이루어 사용자 인터페이스 항목의 설명을 나타낸다.
- for 속성에는 input의 id를 넣어준다 ( 명시적 작성 방식 )
<label for="age"></label>
<input type="number" id="age">
- label의 자식요소에 input을 넣어준다 ( 암시적 작성 방식)
<label>
나이 :
<input type="number" id="age">
</label>
나이 :
<input> 태그
input의 유형은 type 속성에 따라 분류한다.
- text : 기본 텍스트를 입력하는 input 생성
- password : 비밀번호를 입력하는 input
- email : 이메일을 입력하는 input
- tel : 전화번호 입력하는 input
- number : 숫자를 입력하는 input
- range : 범위로 숫자를 입력하는 input
- date : 시간을 제외한 년/월/일을 입력하는 input
- submit : form을 제출할 수 있는 input
- reset : form을 초기화 할 수 있는 input
- checkbox : 체크박스를 선택할 수 있는 input
<input> 의 속성
<input type="text" name="id" placeholder="id를 입력하세요" autocomplete="off" required>
✔ name 속성 : Form 데이터 상에서 구별 가능하게 함
✔ placeholder 속성 : 어떤 값이 들어가야하는지 사용자에게 알려줌
✔ autocomplete 속성 : on인 경우 자동 완성기능을 제공함
✔ required 속성 : 필수로 입력해야 form 제출이 가능함
✔ disabled 속성 : input 값에 사용자가 접근 못하게하여 input 자체가 비활성화됨
✔ readonly 속성 : 읽기전용으로 input 값이 수정이 안됨
✔ min,max 속성 : type이 number, range인 경우 설정 가능
✔ step 속성 : type이 number, range인 경우 step수만큼 증감하게 설정 가능
<button> 태그
클릭 가능한 버튼을 나타낸다.submit, reset, button 3가지 type이 존재한다.
<button type="button">
Button
</button>
Button
❗ input을 사용하지 않고 button을 사용하는 이유?
button 과 input의 차이점은 자식요소의 유무이다. input은 자식 요소를 가질 수 없고 button은 자식 요소를 가질 수 있다. 따라서 button 요소는 input 요소보다 스타일을 적용하기 훨씬 수월하다
<select> 태그
옵션 메뉴를 제공하는 컨트롤을 나타낸다. 후보군으로는 <option>태그를 사용한다.
<form>
<label for="movie"> 좋아하는 영화 : </label>
<select id="movie" name="movie">
<option value="toystory" selected>토이스토리</option>
<option value="simpson">심슨</option>
<option value="insideout">인사이드아웃</option>
</select>
</form>
좋아하는 영화 :
토이스토리
심슨
인사이드아웃
✔ value 속성 : 서버에는 value 값으로 제출된다. value 속성이 없으면 내부의 값이 value 값이 됨
✔ selected 속성 : 디폴트 값을 설정한다.
✔ <optgroup> 으로 옵션을 그룹화 할 수 있고 label로 그룹명 설정이 가능하다
<textarea> 태그
멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.
<form>
<p>textarea :
<textarea cols="50" rows="3"
placeholder="default">입력하세요.</textarea>
</p>
</form>
textarea :
✔ rows cols 속성으로 텍스트 크기 조절할 수 있음Author And Source
이 문제에 관하여(HTML - Form 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ywc8851/9281저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)