프로그래밍/HTML&CSS

input 태그

하와이블루 2022. 8. 24. 11:19
728x90

<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
저작자표시 (새창열림)