[개발]프로그래밍/html5
[html5] readonly,required - 읽기 전용,필수 값 지정
좋은 블로그
2021. 2. 17. 10:02
1. 개념
readonly,required - 읽기 전용,필수 값 지정
readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 오직 읽게만 만들어 줌
required : 폼에서 submit 버튼을 눌렀을 때 필수로 입력하게 지정하여 필수로 입력되어야 할 필드를 설정할 수 있음
2. 태그
readonly,required
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
<form>
1
<label>
readonly 속성 :
</label>
<input type
=
"text"
value
=
"읽기만 가능합니다"
readonly
><br><br>
2
<label>
required 속성 :
</label>
<input type
=
"text"
required
>
</form>
</body>
</html>
|
결과 화면
코드 설명
1
<input type
=
"text"
.....
readonly
>
readonly는 입력되어 있는 텍스트를 오로지 읽기만 가능하게 합니다.
읽기만 하려고 하면 구지 input type=text를 사용하지 않고 다른 방법으로 이용할 수 있을 수도 있겠지만 여러 필드를 입력하고자 할 경우에 특정 필드만 읽기 할 경우에는 전체적인 UI를 고려해야 하기에 readonly를 사용하게 됩니다.
읽기만 하려고 하면 구지 input type=text를 사용하지 않고 다른 방법으로 이용할 수 있을 수도 있겠지만 여러 필드를 입력하고자 할 경우에 특정 필드만 읽기 할 경우에는 전체적인 UI를 고려해야 하기에 readonly를 사용하게 됩니다.
2
<input type
=
"text"
required
>
required를 지정하고 submit를 누르게 되면 위에서와 같은 메시지를 보여주게 됩니다.
즉 아무런 값도 없이 공백만 있을 경우에는 반드시 값이 입력되어 있어야 서버 프로그램으로 전송이 이루어지게 됩니다.
즉 아무런 값도 없이 공백만 있을 경우에는 반드시 값이 입력되어 있어야 서버 프로그램으로 전송이 이루어지게 됩니다.