HTML 학습 29 부 : HTML 양식에서 읽기 전용, 비활성화 및 대상 속성 사용

이미 <input> 태그를 알고 있습니다이전 기사에서 그 기능. 이 태그는 사용자에게 정보를 요청하는 데 사용되는 요소를 작성하는 데 사용됩니다. 이 태그는 일반적으로 텍스트 상자, 단추, 선택 상자 등의 형태 일 수 있습니다.

이전 튜토리얼에서는HTML에서 입력 태그 사용 및 텍스트, 비밀번호 및 제출과 같은 입력 유형 값에 대해 이 튜토리얼에서는 HTML 형식의 읽기 전용, 비활성화 및 대상 속성 사용에 대해 설명합니다. 이 세 가지 속성은 구현시 분명히 다른 기능을합니다. 세 가지 속성에 대한 자세한 내용은 다음 자습서를 살펴 보겠습니다.

읽기 전용 및 비활성화 된 속성

일반적으로 속성은 읽기 전용이며 비활성화되어 있습니다.텍스트 상자를 사용할 수 없게 만드는 데 사용됩니다. 특정 목적을 위해 텍스트 상자를 변경할 수 없도록 예를 들어 기본값이있는 텍스트 상자와 같이이 두 속성이 확실히 필요합니다. 다음은이 두 가지 속성에 대한 설명입니다.

1. 읽기 전용 속성

readonly 속성은 <input> 요소를 편집 가능하지 않고 읽을 수만 있도록 지정하는 데 사용됩니다. 다음은 HTML 양식에서 readonly 속성을 작성하고 사용하는 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Readonly pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" readonly> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

위의 코드가 브라우저에서 실행되면 아래와 같이 나타납니다.

열에서 상품 코드, 보낼 수 없습니다입력 열에 읽기 전용 속성이 부여되었으므로 열은 읽기 전용 일 수 있으며 편집하거나 변경할 수 없습니다.

2. 비활성화 된 속성

disabled 속성은 비활성화하는 데 사용됩니다요소 (예 : 입력 요소) 읽기 전용 속성과 유사하게이 속성은 기록 할 필요가 없으며 쓰기 만 가능합니다. 다음은 HTML 양식에서 사용 불가능한 속성을 작성하고 사용하는 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Disabled pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" disabled> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

위의 코드가 브라우저에서 실행되면 아래와 같이 나타납니다.

읽기 전용 및 비활성화 된 속성의 차이점

위의 두 코드 샘플에서 볼 수 있습니다읽기 전용 및 비활성화 된 속성 사용과의 차이점 readonly 속성은 텍스트 상자를 평소대로 유지하고 disabled 속성은 텍스트 상자를 회색으로 만듭니다. 그럼에도 불구하고 제출 단추를 클릭 할 때 읽기 전용 속성의 값은 여전히 서버로 전송되고 비활성화 된 속성은 그렇지 않다는 점을 알아야합니다.

속성 읽기 전용 : 값 상품 코드 서버로 보냄

비활성화 된 속성 : value 상품 코드 서버로 전송되지 않음

3. 대상 속성

대상 속성은 장소를 결정하는 데 사용됩니다양식을 제출 한 후받은 응답 중 대상 속성의 값은 _blank, _self, _parent 및 _top입니다. 이 대상 속성의 사용은 기사에서 HTML로 링크를 만드는 방법을 설명했습니다.

다음은 코드 작성 및 HTML 형식의 대상 속성 사용 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Target di HTML Forms</title>
</head>
<body>
<form action="proses_input.php" method="get" target="_blank">
Nama Depan: <input type="text" name="ndepan"><br>
Nama Belakang: <input type="text" name="nbelakang"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

위의 코드가 브라우저에서 실행되면 아래와 같이 나타납니다.