-
input 태그프로그래밍/HTML&CSS 2022. 8. 24. 11:19728x90
<input> 태그는 아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분에 주로 사용된다. <input> 태그는 type 속성을 설정하여 속성값에 따라 입력 content를 변화시킨다.
대표적인 type 속성으로는 text, radio, checkbox 등이 있다. 아래에서 자세히 알아보자
type 속성
text는 문자를 입력 받는 글 상자의 기능을 제공한다.
<input type="text">password는 비밀번호를 입력 받는 글상자의 기능을 제공한다.
<input type="password"><body> <h2>회원가입</h2> <form action="데이터를 보내는 경로(URL)" method="post"> <p>아이디 : <input type="text" size="20" maxlength="20" name="userid" id="userid" class="form" placeholder="아이디를 입력하세요" required> </p> <p>비밀번호 : <input type="password" size="20" maxlength="20" placeholder="비밀번호는 입력하세요" required> </p> </form> </body>size : 크기를 설정하는 속성 maxlength : 값의 최대길이를 설정하는 속성 placeholder : 입력전 특정 데이터를 입력하도록 안내하는 값을 설정
radio는 여러개의 옵션 중에서 단 하나의 옵션만을 입력 받을 수 있도록 하는 버튼의 기능을 제공한다.
<input type="radio" name="gender">하나의 그룹을 맻기 위해서는 name 속성의 값이 동일해야한다.
<body> <h2>회원가입</h2> <form action="#" method="post"> <fieldset> <legend>성별</legend> <p> <label>남자<input type="radio" name="gender" value="남자" checked></label> <label>여자<input type="radio" name="gender" value="여자"></label> </p> </fieldset> </form> </body>checked : 여러개의 라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정
여기서 <label> 태그는<input> 태그와 같은 폼요소에 레이블을 붙을 때 사용하며, 레이블의 의미는 입력란 가까이 아이디나 비밀번호처럼 붙여 놓은 텍스트를 의미한다. <label> 태그를 사용하게 되면 폼 요소와 레이블 텍스트가 서로 연결 되었다는 것을 웹 브라우저는 알 수 있다.
<label> 태그를 사용하는 방법은 2가지로,
첫번째 방법은 태그 안에 폼 요소를 넣는 것이다.
<label>남자<input type="radio"></label>두번째 방법은 <label> 태그와 폼요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것이다. 다시말해 폼 요소의 id 속성값을 <label> 태그의 for 속성에게 알려주는 방법이다.
<label for="man">남자</label> <input type="radio" id="man">
두 번째 방법은 첫번째 방법보단 복잡해보이지만 <label> 태그를 사용한 레이블과 사용자 정보를 입력받은 <input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있다.
checkbox는 여러개의 옵션 중에서 다수의 옵션을 입력 받을 수 있도록 하는 버튼의 기능을 제공한다.
<input type="checkbox"><body> <h2>회원가입</h2> <form action="#" method="post"> <p>취미 : <label>요리<input type="checkbox" name="hobby" value="드라이브" checked></label> <label>등산<input type="checkbox" name="hobby" value="등산" checked></label> <label>게임<input type="checkbox" name="hobby" value="게임" ></label> <label>쇼핑<input type="checkbox" name="hobby" value="쇼핑" ></label> <label>독서<input type="checkbox" name="hobby" value="독서" disabled></label> </p> </form> </body>disabled : 입력필드를 사용할 수 없게 설정, 비활성화
button을 누를 수 있는 기능을 제공하는 button type으로 이벤트가 없는 일반 버튼의 기능을 제공하는 button, 입력받은 데이터를 초기화 하는 버튼의 기능을 제공하는 reset, 입력받은 데이터를 서버에 제출하는 버튼의 기능을 제공하는 submit으로 나뉜다.
<body> <h2>회원가입</h2> <form action="#" method="post"> <p> <input type="button" value="확인" onclick="alert('클릭했습니다!')"> <input type="reset" value="다시작성"> <input type="submit" value="가입"> </p> </form> </body>
<textarea> 태그는 여러줄의 텍스트를 입력 받는 글상자로 input:text와는 차이가 분명하다.
<textarea cols="가로글상자 크기" rows="세로글상자 크기"></textarea>file은 원하는 파일을 서버로 전송하기 위한 글상자 기능을 제공한다.
<body> <h2>회원가입</h2> <form action="#" method="post"> <p>사진 : <input type="file"></p> <p>쿠폰 : <input type="text" readonly></p> <p><textarea cols="30" rows="10"></textarea></p> </form> </body>
<select> 태그는 여러개의 옵션이 드롭다운 리스트를 만들어 그 중에서 단 하나의 옵션만을 입력 받을 수 있다.
<option> 태그를 통해 선택 할 수 있는 옵션을 설정한다.
<select> <option>내용</option> <option>내용</option> </select><body> <h2>회원가입</h2> <form action="#" method="post"> <p>직업 : <select name="job"> <option value="">선택하세요</option> <option value="학생">학생</option> <option value="의사">의사</option> <option value="변호사">변호사</option> <option selected value="개발자">개발자</option> <option value="백수">백수</option> <option value="건물주">건물주</option> <option value="공무원">공무원</option> </select> </p> </form> </body>selected : 셀렉트의 option 중에서 미리 선택하는 옵션
728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
선택자(selector) (1) (1) 2022.08.26 CSS 들어가기 (0) 2022.08.25 form 태그 (0) 2022.08.23 iframe(아이프레임) (0) 2022.08.22 하이퍼링크 태그 (0) 2022.08.21