readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 오직 읽게만 만들어 줌
required : 폼에서 submit 버튼을 눌렀을 때 필수로 입력하게 지정하여 필수로 입력되어야 할 필드를 설정할 수 있음
티스토리 뷰
1. 개념
readonly,required - 읽기 전용,필수 값 지정
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를 누르게 되면 위에서와 같은 메시지를 보여주게 됩니다.
즉 아무런 값도 없이 공백만 있을 경우에는 반드시 값이 입력되어 있어야 서버 프로그램으로 전송이 이루어지게 됩니다.
즉 아무런 값도 없이 공백만 있을 경우에는 반드시 값이 입력되어 있어야 서버 프로그램으로 전송이 이루어지게 됩니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] multiple,datalist - 데이터 목록 나열 (0) | 2021.02.19 |
|---|---|
| [html5] size,maxlength,minlength - 길이, 최대 글자 수, 최소 글자 수 (0) | 2021.02.18 |
| [html5] autofocus,placeholder - 커서 위치,힌트 표시 (0) | 2021.02.16 |
| [html5] input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부 (0) | 2021.02.15 |
| [html5] input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성 (0) | 2021.02.10 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday