html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기
네 안녕하세요, 이번 포스팅에서는 html을 이용해서 폼 요소에 입력하는 정보의 양식을 제공 받게 하고,
형식을 가진 텍스트를 입력하는 것을 한 번 해보겠습니다.
우리가 보통 폼을 이용해서 만드는 것들은 로그인 화면 같이 무언가를 입력을 하는 창입니다.
그런데 그러한 정보 입력 칸들이 중구난방하면 시인성이 떨어지기 때문에 사용자들이 불편함을 느낄 수가 있습니다.
그래서 그러한 경우가 발생하지 않도록 폼 요소들을 묶어주는 겁니다.
그래서 이번 시간에는 어떤 식으로 폼 요소들에 대한 양식을 제공하며,
그리고 폼 요소에 부가적으로 추가하면 좋은 기능들이 어떤 것들이 있는지 한 번 알아보도록 하겠습니다.
그럼 함께 보실까요?
1. 입력한 정보의 힌트 및 양식 보여주기 : type, placeholder 속성 이용
우리가 input 태그에 사용하는 속성 값 중에서는 placeholder라는 속성이 있습니다.
이걸 이용하면 사용자가 해당 페이지에 어떤 것을 입력하면 되는지,
그리고 형식은 어떻게 되는 지도 보여줄 수 있습니다.
placeholder 속성은 이렇게 이용을 합니다.
<input type="email" placeholder="id@host">이런 식으로 type 속성 옆에 힌트를 줄 수 있도록 씁니다.
2. 형식을 가진 텍스트 입력하기 : type, placeholder 속성 이용
html에서는 이메일 주소, 홈페이지의 url, 연락처 등
여러 가지 형식에 맞게 입력되었는지 검사를 해주는 폼 요소가 존재합니다.
input 태그에서 쓰는 type 속성에 각각 email, url, tel을 써주면 됩니다.
이들을 placeholder 속성을 이용해서 쓰게 된다면 이렇게 쓸 수 있습니다.
<input type="email" placeholder="id@host"> // 이메일 입력
<input type="url" placeholder="http://"> // url 입력
<input type="tel" placeholder="010-0000-0000"> // 전화번호 입력
이런 식으로 사용이 가능합니다.
그럼 이걸 로그인 폼이나 개인정보 입력 폼 등에 어떻게 사용을 할 수 있는지 한 번 간단한 예제를 통해 알아봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>형식을 가진 텍스트 입력</title>
</head>
<body>
<h3>회원 정보를 입력해주세요</h3>
<hr>
<form>
email : <input type="email" placeholder="id@host"><br>
홈페이지 : <input type="url" placeholder="http://"><br>
전화번호 : <input type="tel" placeholder="010-1234-5678">
<input type="submit" value="확인"><br><br>
<hr>
검색어 : <input type="search" placeholder="검색어"><br>
<input type="button" value="검색">
</form>
</body>
</html>이렇게 작성을 하실 수 있습니다.
제가 작성한 것은 회원가입 시 회원 정보를 입력하는 칸을 간단하게 만들어 본 것입니다.
각각 이메일 주소, 본인의 홈페이지가 있다면 홈페이지의 url,
그리고 연락처를 입력하는 칸을 만들었습니다.
그리고 추가적으로 검색을 할 수 있는 창 까지 만들어봤습니다.
그럼 이제 결과 화면을 보도록 하겠습니다.
이렇게 깔끔하게 회원 정보 입력 창이 만들어진 것을 확인해 보실 수 있습니다.
여기까지 입력해야 하는 정보의 대한 양식을 보여주는 방법과
형식을 가진 텍스트를 입력하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 폼 요소를 그룹핑 하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기 (0) | 2023.03.10 |
|---|---|
| html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 (0) | 2023.03.07 |
| html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 (0) | 2023.03.07 |
| html color 속성 이용하여 색 입력하기 (0) | 2023.03.07 |
| html label 태그로 폼 요소의 캡션 만들기 (0) | 2023.03.06 |
댓글