![[HTML & CSS] HTML5에 새롭게 추가된 input 속성](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbfor7N%2FbtrMkNNlWIZ%2FP0oQhUgiuxV19H15igVMp0%2Fimg.png)
이전글 input의 속성들의 연장입니다.
1. autocomplete 속성
2. autofocus 속성
3. form 속성
4. formation 속성
5. formmethod 속성
6. multiple 속성
7. placeholder 속성
8. required 속성
9. step 속성
1. autocomplete 속성
autocomplete속성은 form태그나 input태그에 적은 데이터를 저장합니다. 디폴트 값은 off이기 때문에 속성값을 on으로 맞춰주어야 합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form autocomplete="on">
이름: <input type="text" name="name"> 데이터를 입력하고 입력하고 전송버튼을 누른뒤 새로고침하면 데이터를 저장한다.<br>
나이: <input type="number" name="age" min="1" max="100"><br>
주소: <input type="text" name="addr" autocomplete="off"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
결과)
입력 후 전송버튼을 누르면 데이터를 제출해서 입력한 데이터가 모두 사라지지만 뒤로가기 버튼을 누르면 입력했던 데이터를 기억하고 있습니다.
2. autofocus 속성
웹 페이지가 열릴때 autofocus 속성이 적용된 <input> 태그에 자동을 커서를 위치시켜줍니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
아이디 : <input type="text" name="id" autofocus> <br>
비밀번호 : <input type="text" name="pwd">
</form>
</body>
</html>
결과)
3. form 속성
<form>~</form>태그 안에 보통 <input>태그를 넣어주지만 form속성은 위치에 상관없이 <form>태그에 포함될 수 있습니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form id="login">
아이디 : <input type="text" name="id" autofocus> <br>
</form>
비밀번호 : <input type="text" name="pwd" form="login">
</body>
</html><form>~</form>태그 안을 벗어났지만 form속성으로 login을 받아주었기 때문에 정상작동할 수 있습니다.
결과)
4. formation 속성
<form>태그에서 action속성은 사용자로부터 입력받은 데이터를 처리하는 페이지 url을 명시합니다. formaction속성은 action속성과 다르며, action속성을 덮어쓰게 됩니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form action="Alpha_test.php" method="#">
아이디 : <input type="text" name="id"> <br>
비밀번호 : <input type="text" name="pwd"> <br>
<input type="submit" value="전송">
<input type="submit" value="베타테스트 전송" formaction="Beta_test.php">
</form>
</body>
</html>
전송버튼을 누르면 입력 데이터가 Alpha_test.php로 전송되어 처리된다. 베타테스트 전송버트을 누르면 입력 데이터가 Beta_test.php로 전송되어 처리된다.
5. formmethod 속성
formtarget속성은 <img>태그의 target속성처럼 처리한 결과 페이지를 어디에 띄울지를 결정합니다. formtarget속성은 <form>태그의 target속성을 덮어씁니다.
예시)
<form action="#" method="#">
인증번호를 입력해주세요: <input type="text" name="id"><br>
<input type="submit" value="전송">
<input type="submit" value="새창에서 열기" formtarget="_blank">
</form>전송버튼을 누르면 입력한 데이터를 처리하는 결과 페이지가 현재 페이지에서 열리지만 formtarget에서 _blank로 속성값을 정해주었기 때문에 새창에서 열기 버튼을 누르면 새창에서 결과 페이지가 나타나게 됩니다.
<img>태그의 target="_blank"와 비슷하다고 생각합니다.
6. multiple 속성
<input>태그의 multiple속성은 입력할 데이터의 갯수(email, file타입 데이터만 허용)를 두개 이상 허용합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<input type="file" name="upload" multiple> <br>
</form>
</body>
</html>
결과)
7. placeholder 속성
placeholder속성은 사용자가 무엇을 입력해야 할지 안내해주는 역할을 하는 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<input type="text" name="id" placeholder="아이디를 입력하세요."> <br>
<input type="password" name="pwd" placeholder="비밀번호를 입력하세요.">
</form>
</body>
</html>
결과)
8. required 속성
<input>태그에 required속성이 부여되면 반드시 입력을 해주어야 합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
주소 : <input type="text" name="id" placeholder="주소는 반드시 입력해야 합니다." size="30" required> <br>
</form>
</body>
</html>
결과)
9. step 속성
step속성은 숫자의 간격을 설정합니다. 그래서 <input>태그 중 숫자를 나타내는 타입에서만 사용이 가능합니다.
number, range, date, time, datetime-local, month, week등의 타입에서 사용가능
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>input Tag</title>
<meta charset="UTF-8">
</head>
<body>
<form>
짝수 : <input type="number" name="even" min="0" max="100" step="2">
</form>
</body>
</html>
결과)
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] CSS 선택자(selecter) (0) | 2022.09.17 |
|---|---|
| [HTML & CSS] HTML video & audio (2) | 2022.09.17 |
| [HTML & CSS] input의 속성들 (0) | 2022.09.16 |
| [HTML & CSS] HTML5에 새로 추가된 input (0) | 2022.09.16 |
| [HTML & CSS] HTML 입력 태그 (0) | 2022.09.13 |