input요소는 각종 입력 양식을 제공한다.
<input type="text">한줄 입력 박스</input>
<input type=""password">비밀번호 입력 박스</input>
<input type="radio">라디오 박스</input>
<input type="checkbox"></input>
<input type="button">일반버튼</input>
<input type="submit">전송</input>
<input type="reset">취소</input>
<input type="image">이미지</input>
<input type="file">파일업로드</input>
<input type="hidden">요소</input>
<!--개발자가 사용자에게 노출하지 않고 값을 서버로 전송하는 입력요소-->
이런식으로 사용하며 각 input요소는 form요소에 담겨 사용된다.
자세한 설명은 아래 예제에 주석으로 써놨다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h1>input 요소 테스트</h1> | |
| <form action="#" method="post"> | |
| <!--form태그는 action에 지정된 주소로 method에 지정된 방식으로 전송하게 된다.--> | |
| <fieldset> | |
| <legend>회원가입</legend> | |
| <p><label for="u_id">아이디:<input type="text" size="12" maxlength="10" id="u_id"/></p> | |
| <!--label을 클릭할 때 for에 지정된 id값으로 포커스를 옴겨준다. 사용상의 편의를 위해 지정--> | |
| <p>패스워드:<input type="password" size="12" maxlength="10"/></p> | |
| <!--패스워드의 경우 lebel for지정이 안되어 있기 때문에 label을 클릭해도 아무 변화가 없다.--> | |
| <p>메일수신여부 | |
| <input type="radio" value="y" name="mail"/>예 | |
| <input type="radio" value="n" name="mail"/>아니오 | |
| <!--name value는 꼭 입력해야 하며 name이 같아야 grouping 된다.--> | |
| <!--실재 서버로 넘어갈때는 예,아니오 가아니고 name,value값이 넘어간다.--> | |
| </p> | |
| <p><label for="u_jumin">주민번호입력</label> | |
| <input type="text" maxlength="6" id="u_jumin" title="주민번호 앞 6자리 입력"/> | |
| <input type="password" maxlength="7" id="u_jumin" title="주민번호 뒤 7자리 입력"/> | |
| <!--title은 input값에 대한 설명이 기술되는 부분이다.--> | |
| </p> | |
| <p>관심분야: | |
| <input type="checkbox" value="HTML" name="ch1"/>HTML | |
| <input type="checkbox" value="JAVA" name="ch2"/>JAVA | |
| <input type="checkbox" value="Spring Framework" name="ch3"/>Spring Framework | |
| <input type="checkbox" value="C++" name="ch4"/>C++ | |
| </p> | |
| <p> | |
| <input type="submit" value="전송"/><!--default는 query전송--> | |
| <input type="reset" value="취소"/> | |
| <input type="button" value="확인버튼"/> | |
| <input type="image" src="..\cake.png" width=100 height=80 alt="검색"/> | |
| </p> | |
| <p>파일 올리기: | |
| <input type="file"/> | |
| </p> | |
| <p>hidden: | |
| <input type="hidden" value="메롱" name="kidding"/> | |
| <!--hidden은 잘 사용하지 않는다.--> | |
| </fieldset> | |
| </form> | |
| </body> |
input 요소 테스트
'개발 > HTML5' 카테고리의 다른 글
| 웹 관련 정리 내용 (0) | 2014.12.19 |
|---|---|
| JSP기본 정의 (0) | 2014.12.16 |
| 02.HTML - Table 태그의 종류 및 사용법 (0) | 2014.12.02 |
| 01.HTML - 기본 태그 설명 및 예제 (0) | 2014.12.02 |
| 00.HTML - 기본 개념 (0) | 2014.12.02 |
댓글