흔히 로그인페이지의 아이디, 비밀번호처럼
입력된 값을 서버로 전송할 때 사용하는 글자를 넣는 곳 / 선택하는 것들을 form이라고 부른다.
폼이 정상적으로 작동하기 위해서는 유저로부터 정보를 입력할 수 있는곳을 먼저 만들어줘야겠지?
그 때 사용하는게 input이다.
input 요소 안에 type 속성으로 태그모양을 다양하게 변경 가능하다.
인풋 type 목록들
text 입력한 text를 그대로 표현해주는 input
button 누를 수 있는 간단한 버튼을 만드는 input
password 마스크 처리된 text input
search 검색 창으로 사용할 수 있는 input
date 날짜를 입력할 때 사용할 수 있는 input
time 시간을 입력할 때 사용할 수 있는 input
range 슬라이드 바 형식의 input
number 수를 선택할 수 있게 하는 input
color 색을 선택할 수 있는 input
radio 선택 항목 중 하나만 선택 가능한 input
checkbox 선택 항목 중 0개 이상 선택 가능한 input
file 파일을 업로드 할 수 있는 input
email 이메일 주소를 입력하게 하는 input
url 웹페이지 주소를 입력하게 하는 input
tel 전화번호를 입력하게 하는 input
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<input type="text"><br>
<input type="password"><br>
<input type="date"><br>
<input type="time"><br>
<input type="range"><br>
<input type="color"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="file"><br>
<textarea name="name" rows="8" cols="80"></textarea>
</body>
</html>그 밖에 다른 속성
name 태그 이름을 지정
readonly 태그를 읽기 전용으로 만듬
maxlength 최대 글자 수를 지정
minlength 최소 글자 수를 지정
required 필수 태그로 지정. 필수 태그를 입력하지 않고, submit 버튼을 누르면 에러가 떠 데이터가 전송되지 않음
autofocus 웹 페이지가 로딩 되면 이 속성을 지정한 태그로 포커스가 바뀜.
placeholder 입력할 값에 대한 힌트를 줌.
pattern 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력 받을 때 사용.
input요소들을 잘 넣어주었다면,
다시 input의 속성 중 하나인 submit으로 '제출'을 만들어줄 수 있음.
하지만 제출만 넣는다고 되는게 아니지! 제출된 정보가 어디로 전송될건지? 라는 정보가 부족하기 때문이다.
이 때 사용하는 태그가 form이다.
일단 form태그를 이용해 input 태그들을 다 자식요소로 넣어준다.
그리고 form 태그에 action속성을 넣어 이 form 안의 정보들을 어디로 보내줄건지 지정하면 된다.
예를들어, http//localhost/login.php로 보내주세요~ 하고 <form action="http//localhost/login.php">로 지정하면,
로그인 정보가 그곳으로 들어가게 된다.
그리고 제출버튼을 누르면 url이 그곳으로 바뀌는 걸 볼 수 있다.
그리고 각각의 정보가 뭘 의미하는지 구분하기 위해서 name속성을 지정해준다.
아이디를 egoing, 비밀번호를 1111, 주소를 seoul이라고 지정해보고 서밋을 해보자.
그래. 이렇게 전송을 하면 된다.
하지만 전송을 어떤 방식으로 할건지를 선택해줘야 한다.
그게 바로 'method' 속성이다.
크게 get과 post로 나뉜다.
우리가 설정하지 않으면 디폴트는 get으로 지정되어있고, get속성은 기본적으로 url로 정보를 전달하기 때문에 자칫
개인정보나 보안정보, 당연히 비밀번호 등등도 그대로 노출시킨다.
그래서 상황에 따라서 정보를 안보이게 감싸서 전달해줄 수 있는 post방식을 사용해야 한다.
다른방법으로 데이터를 숨겨서 전송한다.
결론적으로 우리가 폼을 이용해서 데이터를 전송할때는 거의 100프로 post방식으로 전송하면 된다.
<form action="http//:blabla.com" method="post">
<input type="text" name="id"><br>
<input type="password" name="pwd"><br>
<input type="submit" value="회원가입">
</form>'Front-End Developer > HTML' 카테고리의 다른 글
| 점진적 향상기법이란? / 이미지 포맷의 종류 (0) | 2022.04.02 |
|---|---|
| srcset attribute를 이용해서 반응형 이미지 만들기 (0) | 2022.04.02 |
| Grouping Content (0) | 2022.04.02 |
| What is HTML Living Standard? (0) | 2022.04.02 |
| Semantic HTML (0) | 2022.03.05 |