반응형
이 포스트에서는 input태그의 placeholder,readonly, autofocus 세가지 속성을 살펴볼 것이다.
placeholder
placholder는 입력란에 힌트를 표시해줄 때 사용하는 속성이다. 아래 코드와 같이 input 태그에 "Type text here"라는 값을 가진 placeholder 속성을 넣어준다고 가정하자.
<fieldset>
<legend>Test</legend>
<p>
<label for="forms">Test Form</label>
<input type="text" id="forms" placeholder="Type text here">
</p>
</fieldset>결과를 보면 폼에 Type text here라는 힌트가 나오는것을 볼 수 있다.
readonly
readonly는 사용자가 입력 / 편집을 못하게 막고, 읽기만 가능한 읽기전용 필드를 만들 때 사용한다. readonly를 위해서는 "디폴트 값"이라는걸 넣어주어야할 때가 있는데, 이때는 value속성에 값을 지정해 주면 된다.
<fieldset>
<legend>Test</legend>
<p>
<label for="forms">Test Form</label>
<input type="text" id="forms" value="Example Value" readonly>
</p>
</fieldset>결과는 아래와 같이 디폴트 값이 폼에 입력된 상태로 출력이 되며, 수정이 되지 않는다.
required
required 속성은 필수로 입력해야하는 필드를 지정할 때 사용하는 속성이다.submt과 같이 폼 입력값을 제출하는 경우에, 입력을 안했으면 입력하라는 창이 나오게 된다.
<fieldset>
<legend>Test</legend>
<p>
<label for="forms">Test Form</label>
<input type="text" id="forms" required>
<input type="submit" formmethod="post">
</p>
</fieldset>
이 세가지 속성을 이용하여 간단한 입력폼을 작성해 보았다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<fieldset>
<legend>Delivery Info</legend>
<ul>
<li>
<label for="product">Ordered Product</label>
<input type="text" value="Gift 3kg" id="product" readonly>
</li>
<li>
<label for="user-name">Name</label>
<input type="text" id="user-name" autofocus placeholder="Your name here">
</li>
</ul>
<ul>
<li>
<label for="user-mail">Email</label>
<input type="email" id="user-mail" placeholder="Your mail here">
</li>
</ul>
<ul>
<li>
<label for="phone-number">Phone</label>
<input type="tel" id="phone-number" placeholder="Without hipen">
</li>
</ul>
<input type="button" onclick="collectDats()" value="Submit">
</fieldset>
</form>
<div id="result">
<h2>Result</h2>
<ul>
<li>Product Name : <span id="prod"></span></li>
<li>User Name : <span id="name"></span></li>
<li>User Mail : <span id="mail"></span></li>
<li>User Phone : <span id="phone"></span></li>
</ul>
</div>
<script>
function collectDats(){
const productName = document.getElementById("product");
const userName = document.getElementById("user-name");
const userMail = document.getElementById("user-mail");
const userPhone = document.getElementById("phone-number");
const writeName = document.getElementById("prod");
const writeUName = document.getElementById("name");
const writeMail = document.getElementById("mail");
const writePhone = document.getElementById("phone");
writeName.innerHTML = productName.value;
writeUName.innerHTML = userName.value;
writeMail.innerHTML = userMail.value;
writePhone.innerHTML = userPhone.value;
}
</script>
</body>
</html>
반응형
'Web Basic > HTML' 카테고리의 다른 글
| CSS 몇가지 text 관련 style 속성들 알아보기 (0) | 2022.03.10 |
|---|---|
| CSS 기본 선택자 (0) | 2022.03.10 |
| HTML form type - radio / type - checkbox (0) | 2022.03.08 |
| <map>태그와 <area>태그 (0) | 2019.02.17 |
| HTML 앵커(Anchor)기능 (0) | 2019.02.16 |
