입력 양식의 경우 서버와 관련된 기술을 알아야지 더욱 자세하게 다룰 수 있는 내용이 많아 여기서는 입력양식 태그 자체의 기본 내용만 정리하겠다!
입력 양식 태그
입력 양식 태그는 사용자에게 일정한 정보를 입력받고, 정보를 넣을 수 있는 공간을 만드는 태그이다.
입력 양식 태그는 <form> 태그를 사용 한다.
<body> <form> </form> </body>
아래 표는 <form> 태그에서 사용 할 수 있는 속성으로 입력된 데이터를 처리하는 기능을 가진다.
- 참고
method는 속성 값으로 get과 post를 가질 수 있음
get : 주소에 테이터를 입력해서 보내는 방식
post : 따로 데이터를 보내는 방식
1) input 태그 🤗
<form> 태그안에는 <input> 태그를 함께 사용 한다.
<input> 태그는 사용자에게 정보를 입력받는 기능을 하는 태그이다. 입력 양식의 형태를 지정할 때는 <input> 태그에 type 속성을 사용하고, 아래 표와 같이 많은 종류의 type속성 값을 가질 수 있다.
▶ 사용 예시
(1)
<body>
<form>
<input type="color"></input><br />
<input type="button">버튼</input><br />
<input type="password">비밀번호</input><br />
<input type="text">안녕하세요</input><br />
<input type="reset"></input><br />
</form>
</body>
(2)
추가로 <input> 태그 내부에 글자를 넣고 싶을 경우 value속성 값을 사용하면 된다.
<body>
<form>
<input value="password"></input>
</form>
</body>
(3)
<input>태그를 설명하고 싶을 때는 <label> 태그를 사용하면 된다.
<label>태그를 사용할 때 주의할 점은 어떤<input>태그를 설명하는지 표시를 해주어야 하기때문에<input>태그에 id 속성을 입력하고<label>for 속성을 입력 해야함
<body>
<form>
<label for="for">비밀번호</label>
<input id="password"></input>
</form>
</body>
2) textarea 태그 😏
여러 줄의 글자를 입력 할 때 textarea 태그를 사용한다.
▶ 사용 예시
<body> <form> <textarea> </textarea> </form> </body>
textarea 태그에 글자를 입력하게 되면 입력된 글자가 출력된다. 이때 주의 할 점은 코드의 열의 맞추기 위해 띄우기를 쓸 경우 제대로 출력이 안될 수 있으므로 지저분하더라도 붙여서 적어야지 올바르게 출력이 된다.
<body>
<form>
<textarea>textarea태그
textarea태그</textarea>
</form>
</body>
다음 표는 textarea태그의 속성이다.
3) 그 외 관련 태그들 (select 태그, optgroup태그) 🤩
여러 개의 목록에서 몇 가지를 선택 할 때 select태그를, 선택 옵션을 묶을 때 optgroup 태그를 사용한다.
참고로 select태그를 사용하면 여러 목록 중 한 가지만을 선택해야하지만 multiple속성을 사용하면 여러 개의 목록을 선택 할 수 있다.
▶ select 태그 사용 예시
<body>
<select>
<option>모자</option>
<option>가디건</option>
<option>맨투맨</option>
<option>신발</option>
</select>
</body>
<select multiple ="multiple">
<option>모자</option>
<option>가디건</option>
<option>맨투맨</option>
<option>신발</option>
</select>▶ optgroup태그 사용 예시
<body>
<select>
<optgroup label="과일">
<option>사과</option>
<option>바나나</option>
<option>메론</option>
</optgroup>
<optgroup label="곡류">
<option>쌀</option>
<option>보리</option>
<option>현미</option>
</optgroup>
</select>
</body>
