Contents
입력 양식의 다양한 속성과 설명입력 양식
- 입력 양식을 만드는 태그는 <form></form> 이다.
- 다양한 속성을 가지고 있다. → action : 데이터의 전송 대상 페이지를 지정 method : 데이터 전송 방법을 지정 (주로 get, post 사용) name : 입력 양식의 이름 지정 → <form action=”example.php” method=”post” name=”contact-form”></form>
- 입력 양식은 “block”의 속성을 가진다.
입력 양식에는 다양한 타입이 존재하는데 이에 따라 다양한 모습을 구현이 가능하다.
1. 한 줄 텍스트 입력란 <input type=”text”> 태그
2. 라디오 버튼을 만드는 <input type =”radio”> 태그
3. 체크 박스를 만드는 <input type =”checkbox”> 태그
4. 전송 버튼을 만드는 <input type=”submit”> 태그
5. 선택 박스를 만드는 <select> 태그 + <option> 태그
6. 여러 줄 텍스트 입력란을 만드는 <textarea></textarea> 태그
7. 입력 양식의 레이블을 만드는 <label> 태그
등 이 존재한다.
이를 바탕으로 다양한 페이지의 입력 박스를 만드는 것이 가능할 것이다.
입력 양식의 다양한 속성과 설명
한 줄 텍스트 입력 란 (<input type=”text”>)
- placeholde : 입력란에 미리 텍스트를 입력
- text : 기본적인 텍스트(초기값)
- search : 검색 전용 텍스트
- email : 메일 주소
- tel : 전화번호
- url : 웹 사이트의 URL
라디오 버튼을 만드는 (<input type =”radio”>)
- name : 라디오 버튼의 이름
- value : 전송될 선택지의 값
- checked : 처음부터 선택돼 있게 하고 싶을 때 지정
체크 박스를 만드는 (<input type =”checkbox”>)
- name : 체크 박스의 이름
- value : 전송될 선택지의 값
- checked : 처음부터 선택돼 있게 하고 싶을 때 지정
전송 버튼을 만드는 (<input type=”submit”>)
- name : 버튼의 이름
- value : 버튼에 출력되는 글자
버튼에 이미지를 사용하고 싶은 경우
- name : 버튼의 이름
- src : 버튼에 사용하고 싶은 이미지 파일의 경로, 파일 이름
- alt : 이미지를 설명하는 글자
선택 박스를 만드는 (<select> + <option>)
<select> 주요 속성
- name : 버튼의 이름
- multiple : shift 또는 ctrl 키로 여러 항목을 선택할 수 있게 됩니다.
<option> 주요 속성
- value : 전송될 선택지의 값
- selected : 처음부터 항목이 선택돼 있게 하고 싶을 때 지정합니다.
여러 줄 텍스트 입력란 (<textarea></textarea>)
- placeholder 속성 지정
입력 양식의 레이블을 만드는 (<label>)
입력 양식 코드
- 입력 양식 타입에 따른 사용 코드
<form action="example.php" method="psot" name="contact-form"> 이름 : <input type="text" placeholder="이름"> <dir></dir> 성별 : <input type="radio" name="gender" value="남자"> 남자 <input type="radio" name="gender" value="여자" checked> 여자 <input type="radio" name="gender" value="그 외"> 그 외 <dir></dir> 좋아하는 색 <input type="checkbox" name="color" value="붉은색" checked> 붉은색 <input type="checkbox" name="color" value="파란색"> 파란색 <input type="checkbox" name="color" value="노란색"> 노란색 <input type="checkbox" name="color" value="초록색"> 초록색 <dir></dir> 혈액형 <select name="bloodtype"> <option value="A">A</option> <option value="B">B</option> <option value="O">O</option> <option value="AB">AB</option> </select> <dir></dir> <input type="checkbox" name="travel" value="국내" id="korea"> <label for="korea">국내</label> <input type="checkbox" name="travel" value="유럽" id="europe"> <label for="europe">유럽</label> <input type="checkbox" name="travel" value="동남아시아" id="asia"> <label for="asia">동남아시아</label> <dir></dir> <textarea name="message" placeholder="메시지 입력"></textarea> <dir></dir> <input type="submit" value="전송"> <dir></dir> <input width="50" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIexREAiqC27cMMlFoZpyRwBFDqK_ouy0vNQ&usqp=CAU" alt="전송"> </form>
출력 결과
Share article
