입력양식
사용자에게 정보를 입력받고 싶을때 사용합니다.
쓰는 방법으로 <form> 태그로 영역을 생성하고 안에 <input> 태그를 넣으면 됩니다.
<form>
<input type='text' name="search"> <!--text: 글자 입력 양식 생성-->
<input type="submit"> <!--제출 하는 버튼 생성-->
</form>
form 태그
- <form> 태그에서 method 속성으로 데이터를 전달하고 action 속성으로 데이터를 전달이 가능합니다.
<form action="전송위치" method="전송방식">
</form>(이는 서버에서 데이터를 처리하기 위해 사용 하는 것 이므로 적절하게 사용 해주시면 됩니다.)
method의 전송 방식
- method 속성은 전송방식 중 get 방식과 post 방식을 많이 사용합니다.
- get 방식은 주소에 데이터를 입력하여 전송하는 것이고 , 주로 데이터를 가져올때 많이 사용합니다.
- post 방식은 비밀스럽게 데이터를 전송하는 것인데 주로 데이터를 제츨하거나 변경하게 될때 많이 사용합니다.
아래 코드는 post 방식의 예시입니다.
유저가 이름과 비밀번호를 입력하여 form을 제출하게 되면 /login 이라는 경로로 데이터가 전송됩니다.
<form action="/signup" method="POST">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<input type="submit" value="가입">
</form>
기본입력 양식 태그
- intput 태그에서 type 속성을 사용해 입력 필드의 유형을 지정할수 있습니다.
- value 속성은 입력 필드의 초기값을 설정하는데 사용 합니다.
<!DOCTYPE html>
<html>
<head>
<title>shopping</title>
</head>
<body>
<form method="post">
<input type="text" name="text", value="text"><br>
<input type="password" name="password", vaule="password"><br>
<input type="file" name="file", value="file"><br>
<input type="reset" value="reset"><br>
</form>
</body>
</html>
간단한 입력 양식 만들기
- <select>태그 와 <option>태그: 하나의 옵션만 선택하는 경우에 사용합니다. (나이를 선택하는 메뉴)
- <fieldset>태그와 <legend>태그: 입력양식들을 그룹으로 묶어 이름을 지정하는 경우에 사용합니다.
<select>
<option>선택</option>
<option>20세</option>
<option>21세</option>
<option>22세</option>
<option>23세</option>
<option>24세</option>
</select><fieldset>
<legend>회원 양식</legend>
</fieldset>
종합
See the Pen Untitled by Loui (@sdyegtiu-the-bold) on CodePen.
'WEB > HTML5' 카테고리의 다른 글
| [HTML5] Emmet 으로 작업흐름을 개선해보자 (0) | 2022.12.20 |
|---|---|
| [HTML5] 문서 구조화 (div와 span) 에 대해 알아보자 (0) | 2022.12.09 |
| [HTML5] HTML 태그들에 대해 알아보자 (0) | 2022.12.07 |
| [HTML5] HTML에 제목 ,본문, 특수문자를 표기해보자. (0) | 2022.12.07 |
| [HTML5] HTML페이지에 기본 방법으로 작성 해보자 (0) | 2022.12.06 |
