티스토리 뷰

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를 사용하게 됩니다.
2
<input type = "text" required >
required를 지정하고 submit를 누르게 되면 위에서와 같은 메시지를 보여주게 됩니다.
즉 아무런 값도 없이 공백만 있을 경우에는 반드시 값이 입력되어 있어야 서버 프로그램으로 전송이 이루어지게 됩니다.
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday