(폼 미쳤다)
form
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>form 태그 안에 아이디, 비밀번호, 주소를 적을 수 있는 input을 작성했다.
아이디와 주소는 가릴 필요가 없어 text로 받지만, 비밀번호는 password라는 타입으로 암호화 해주었다.
제출 버튼을 누르면 form에 연결된 action으로 정보가 전송된다.
action에 작성한 주소는 php가 끝인데 ? 뒤로 input의 name과 내가 입력한 값들이 연결되어 있다.
텍스트 입력
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<p>password : <input type="password" name="pwd" value="default value"></p>
<p>textarea :
<textarea cols="50" rows="2">default value</textarea>
</p>
</form>
</body>
</html>value 값에 기본 값을 써주었다.
placeholder 처럼 input 안에 어떤 값을 넣어야 하는지 힌트를 주는 형태가 아니라 진짜 입력되어 있는 값이다.
<textarea>는 여러 줄의 텍스트 입력 컨트롤을 정의한다.
텍스트 영역의 크기는 cols, rows 속성으로 지정할 수 있다.
현재 50자에 2줄로 입력 값이 규정되어 있다.
<label> 요소
HTML에서 폼 요소와 관련된 텍스트 레이블을 정의하는데 사용된다.
이 태그를 사용하면 폼 요소와 해당 레이블을 연결해 해당 레이블을 클릭할 때 관련된 폼 요소가 선택된다.
이는 사용자 경험과 엑세스 가능성을 향상시켜 웹 접근성 측면에서 중요하고, 스크린 리더 사용자에게 유용하다.
폼 요소에는 입력 상자, 버튼, 라이도 버튼, 체크 박스 등이 포함된다.
레이블과 폼 요소를 아래와 같이 직접 연결할 수 있다.
label 태그에 for 속성을 사용해 연결할 폼 요소의 id 값을 지정하면 된다. 이 때 for 값과 id이 같아야 한다.
<label for="input-id">레이블 텍스트</label>
<input type="text" id="input-id" name="input-name">
또는 레이블을 폼 요소로 감싸 연결할 수 있다. label 태그 안에 폼 요소를 직접 포함시킨다.
<label>
레이블 텍스트
<input type="text" name="input-name">
</label>
그래서 아래와 같이 label 태그와 폼 요소를 연결 시켜주면, label을 입력할 때 관련 폼 요소가 자동으로 선택된다.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="">
<p>
<label for="text-input">text :</label>
<input type="text" id="text-input" name="id" value="default value" />
</p>
<p>
<label for="password-input">password :</label>
<input
type="password"
id="password-input"
name="pwd"
value="default value"
/>
</p>
<p>
<label for="textarea-input">textarea :</label>
<textarea cols="50" rows="2" id="textarea-input" name="textarea">
default value</textarea
>
</p>
</form>
</body>
</html><select> 요소
옵션 메뉴를 제공하는 컨트롤을 나타낸다.
위에서 말한 label이 연결되어 있고 메뉴의 각 옵션은 <option>으로 정의되어 있다.
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
그외 여러 가지 특성을 알아보자.
1) multiple
다수의 항목을 동시에 선택할 수 있다. (지정하지 않으면 1개만 선택 가능)
이 특성이 존재하면 드롭다운 메뉴가 아니라 스크롤이 가능한 목록 상자로 보여진다.
2) size
기존 태그에 size=2를 추가하니 한 번에 노출되는 항목의 수가 2개로 조절되었다.
3) required
반드시 채워야 하는 값이 필요할 때 해당 속성을 추가한다.
예를 들어 회원 가입 폼을 만들 때 아이디는 반드시 들어가야 하기에 그럴 때 required를 써 빈 칸으로 제출하지 못하게 한다.
4) disabled
속성을 추가하면 이렇게 비활성화가 된다.
5) autofocus
차이가 없어 보이지만 웹 페이지를 로드했을 때 가장 먼저 이렇게 클릭한 효과가 난다.
자동으로 포커스를 부여하며, 문서 내에서는 하나의 양식 요소만 이 특성을 가질 수 있다.
여기도 제출하면 select의 name값에 해당되는 value들이 엮여 나온다.
<input type="button">
정보를 전송하고, 이벤트가 붙어 있고, 재설정할 수 있는 버튼을 만든다.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="http://localhost/form.php">
<input type="text" name="이름" />
<input type="submit" value="전송" />
<input type="button" value="버튼" onclick="alert('hello world')" />
<input type="reset" />
</form>
</body>
</html>
전송을 누르면 submit 되어서 action에 연결된 링크로 정보가 보내진다.
그냥 버튼을 누르면 얼럿 창이 뜬다.
onclick은 html에서 쓴 건데 js에서 이벤트 리스너로 똑같이 쓸 수 있다.
초기화 버튼은 따로 설정한 게 아니지만 type="reset"으로 하면 기본적으로 '초기화'가 value로 나온다.
type="submit"으로 하고 value를 설정하지 않으면 이것도 '제출'로 설정된다.
Hidden field
딱히 UI가 필요 없거나 몰래 데이터를 전송해야 할 때 히든 필드를 사용한다.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id" />
<input type="hidden" name="hide" value="egoing" />
<input type="submit" />
</form>
</body>
</html>
코드에는 hidden이 있지만 UI 상에는 보이지 않는다.
text에 썸머몽을 적어 제출하면 주소창에 hide와 그 value값이 찍혀 있긴 한다.
그래서 이건 어디다 쓰는 걸까?
1. 서버로 데이터를 전송해야 하지만 사용자에게 표시되지 않아야 하는 경우
폼을 제출할 때 사용자의 세선 ID나 특정 설정 값이 필요할 수 있다. 이럴 때 숨겨 쓴다.
2. 동적으로 값을 생성하거나 서버에서 생성된 값을 저장해야 할 경우
JS를 써서 동적으로 인풋 요소의 값을 변경하고 그 값을 서버에 전송할 때 사용한다.
예를 들어 뭐 어떤 버튼을 클릭하거나 어떤 조건을 충족할 때 JS로 값을 생성하거나 변경한다고 해보자.
그리고 그 값을 서버에 전송해야 할 때 input 요소에 저장해서 보낼 수 있다.
3. 디버깅이나 테스트 목적으로 임시 데이터를 전달하거나 저장하는 방식
아래 부분을 공식 문서에서 확인해보면 재미 있다.
<input type="hidden"> - HTML: HyperText Markup Language | MDN
<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are c
developer.mozilla.org
<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element
developer.mozilla.org
⭐️ Method
우리가 지금까지 살펴봤던 방식은 get이다.
get 방식과 post 방식의 차이에 대해 알아보자.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="http://localhost/method.php" method="post">
<input type="text" name="id" />
<input type="password" name="pwd" />
<input type="submit" />
</form>
</body>
</html>
어라. summermong을 입력해 제출했는데 주소창에 이전처럼 입력값이 뜨지 않는다.
전처럼 하면 localhost/method.php?id=summermong 이런 식으로 써야 하는데 뒤가 없다.
사실 아까 맨 위에 form을 공부할 때 password 부분도 ?pwd= 에 노출이 되어 있었다.
이렇게 되면 정보가 노출되는 문제가 발생한다.
그런데 지금은 method="post"로 작성하니 제출한 정보들이 모두 보이지 않게 되었다.
이처럼 감춰서 전달해야 할 때는 post를 사용하는 것이다. (기본적으로는 get으로 설정되어 있다.)
언제 get을 쓰고 언제 post를 쓸까?
폼으로 정보를 전달한다면 거의 100% post 방식을 쓴다.
정보를 요청하고 가져오는 get은 데이터를 URL의 쿼리 매개 변수로 전달하고, 지금까지 본 것처럼 주소 표시줄에도 매개 변수가 다 노출이 된다. 그래서 데이터를 조회하거나 검색하는 경우, 게시물 목록을 요청하거나 페이지 네비게이션으로 어떤 페이지로 이동할 때 get을 사용한다. 또 캐싱이 가능해서 브라우저 히스토리에 기록되기 때문에 보안에 민감한 데이터나 큰 데이터는 post를 사용하는 게 좋다.
정보를 제출하거나 변경하는 용도로 쓰는 post는 요청 본문에 데이터를 포함해 전달해서 브라우저 주소 표시줄에는 노출이 되지 않는다. 사용자가 회원 가입 양식을 작성하고 제출하거나, 댓글을 작성하고 제출할 때 post를 사용한다. post는 get과 달리 캐싱이 되지 않고 브라우저 히스토리에도 남지 않아 보안에 좋다.
사실 백단이 어떤 방식으로 요청하느냐에 따라 달라지지만 일단은 알아두자!
파일 업로드
파일을 업로드해보자.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form
action="http://localhost/upload.php"
method="post"
enctype="multipart/form-data"
>
<input type="file" name="profile" />
<input type="submit" />
</form>
</body>
</html>
<form> 요소에서 파일을 업로드 하기 위해 다음 3가지를 기억해야 한다.
1. enctype="multipart/form-data"
1. 파일 데이터 전송
파일은 일반 텍스트 데이터와 다른 형식으로 전송된다. enctype="multipart/form-data"를 설정해야 웹 브라우저가 데이터를 멀티파트 형식으로 인코딩하여 서버로 전송한다. 멀티파트란 데이터를 여러 부분으로 분할해 전송하는 인터넷 프로토콜에서 사용되는 방식... (뭔 소리인지 모르겠지만)으로 파일 업로드 같이 바이너리 데이터를 포함한 경우 사용된다. 바이너리 데이터란 컴퓨터에서 사용되는 데이터 형태 중 하나로, 0과 1로 이뤄진 비트로 데이터를 표현하는 방식인데 사람이 이해하기 어려운 형태를 띄고 있다. 특정 프로그램이나 도구로 읽고 편집할 수 있으며 이미지, 오디오, 비디오처럼 비텍스트 데이터를 나타낼 수 있다.
아무튼 이미지 같은 파일을 업로드할 때 쓰는 형식으로 인코딩을 해야 한다.
그래서 이 인코딩 방식을 쓰기 위해서는 저렇게 설정해주어야 한다.
2. 파일 메타데이터 전송
파일 업로드 시 파일 자체 뿐만 아니라 파일의 데이터(이름, 크기, 형식 등)도 같이 서버로 전송해야 한다.
3. 서버 측 처리
파일 업로드는 서버에서 별도의 처리가 필요하다. (제출 받고 식별하는 과정 등)
2. method="post"
1. 파일 데이터의 크기
파일은 일반적으로 텍스트 데이터보다 크기가 크다. post 방식은 http 요청 본문에 데이터를 포함 시켜 데이터의 크기에 제한이 없다. 반면 get 방식은 url에 데이터를 포함시키는데, 일반적으로 url에는 길이 제한이 있어서 get 방식으로 전송 시 제한된 길이로 인해 데이터의 일부가 잘릴 수 있다.
2. 보안 및 개인정보 보호
위에서 말했던 것처럼 post 방식을 쓰면 url에 데이터가 노출되지 않는다.
3. 파일 업로드 지원
input type="file" 요소를 사용해 파일을 업로드하려면 enctype="multpart/form-data"를 설정해야 인코딩이 가능하다. 이 인코딩 방식은 post 방식에 의해 지원된다.
3. input type="file"의 name=""
name 속성은 input 요소에 의해 전송되는 데이터의 이름을 정의한다.
서버에서는 폼 데이터를 처리할 때 이 이름을 사용해 데이터를 식별한다.
따라서 name이 없을 경우 데이터의 이름이 정의되지 않아 서버는 이 데이터를 처리할 수 없게 된다.
갑자기 어쩌다가 form에 꽂혀서 form을 알아봤다.
최근 to do list를 만들면서 form으로 감싸고 submit 하는 부분이 있었는데 이해가 좀 된다.
'🦴 HTML' 카테고리의 다른 글
| [HTML] 생활코딩 HTML 간단 정리 (0) | 2023.04.13 |
|---|
