[HTML] 폼 구성하기(button 태그, 그 외) -3

Oli-Viaaaa 2023. 7. 19. 15:30

1. button 태그

버튼 요소는 [폼 구성하기 1]에서 살펴봤듯이 input 태그에서 type 속성값을 submit, rest, button으로 지정해 생성할 수 있다

또한 별도의 button 태그로 생성할 수도 있다. button 태그도 마찬가지로 type 속성을 가진다

<button type="종류">버튼 내용</button>

type 속성값은 폼을 서버에 전송할 목적이면 submit,

상호작용 요소에 입력된 내용을 초기화 하는 버튼이면 reset,

단순한 버튼이면 button으로 지정한다

[input 태그로 생성한 버튼과 button 태그로 생성한 버튼은 뭐가 다른가?]
button 태그는 input 태그로 생성할 수 있는 버튼 요소의 역할을 대신하기 위해 만들어진 태그로, input 태그보다 나중에 등장했다
button 태그도 input 태그로 생성하는 버튼 요소처럼 type 속성이 있어서 최신 HTML에서는 버튼 요소를 생성할 때 더이상 input 태그를 사용할 필요가 없다.
button 태그는 시작 태그와 종료 태그가 있어서 콘텐츠를 작성할 수 있다.
단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어 버튼 요소를 꾸미기가 더 수월하다는 장점이 있다.

2. 폼 관련 태그에서 사용할 수 있는 추가 속성

- disabled 속성

disabled 속성은 상호작용 요소를 비활성화 하며 input, textarea, select, button 태그에 사용할 수 있다.

태그가 비활성화되면 입력 요소는 텍스트를 입력할 수 없고, 목록 상자는 항목을 선택할 수 없으며, 버튼 요소는 버튼을 클릭할 수 없다.

형식)
	<태그 disabled>

예를 들어 inuput 태그와 button 태그를 비활성화하려면 다음과 같이 해당 태그에 disabled 속성을 추가하면 된다.

<input type="text" disabled>
<button type="button" disabled>비활성</button>

- readonly 속성

readonly 속성은 상호작용 요소를 읽기 전용으로 변경한다

읽기 전용으로 변경되면 입력 요소에 텍스트를 입력할 순 없지만 요소를 선택하거나 드래그해서 내용을 복사할 순 있다.

readonly 속성은 상호작용 요소를 생성할 수 있는 태그 중 textarea 태그와 input 태그에서 사용할 수 있다.

다만, input 태그 에서는 type 속성값이 text, search, url, tel, email, password, date, month, week, time, datetime-local, number 일때만 사용할 수 있다.

<input type="password" readonly>
<textarea readonly></textarea>

실행해보면 입력 요소에 텍스트를 입력할 순 없지만 마우스로 요소를 클릭하는건 가능하다

disables 속성과 readonly 속성은 둘 다 상호작용 요소를 사용하지 못하게 한다는 점에서 비슷하지만,
disabled 속성은 form 태그로 서버에 전송할때 아예 전송되지 않지만 readonly는 값이 전송된다는 차이가 있다.

- maxlength 속성

maxlength 속성은 입력할 수 있는 글자수를 제한한다. 속성값으로는 숫자를 입력하며, textarea 태그와 input 태그의 type 속성값이 text, search, url, tel, email, password, date, month, week, time, datetime-local, number 일때만 사용할 수 있다.

형식)
	<태그 maxlength="숫자">

위의 코드와 같이 maxlength 속성값을 4로 설정하면 4글자 까지만 입력이 가능하다

- checked 속성

checked 속성은 요소를 선택된 상태로 표시한다. 선택 요소가 있어야 하므로

input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용할 수 있다.

형식)
	<태그 checked>

예제 코드를 통해 확인해 볼 수 있다

<fieldset>
            <legend>좋아하는 과일</legend>
            <input type="checkbox" id="banana" name="banana" value="banana">
            <label for="banana">banana</label><br>
            <input type="checkbox" id="apple" name="apple" value="apple">
            <label for="apple">apple</label><br>
            <input type="checkbox" id="orange" name="orange" value="orange">
            <label for="orange">orange</label><br>
</fieldset>

- placeholder 속성

placeholder 속성은 입력 요소에 어떠한 값을 입력하면 되는 지 힌트를 적는 용도로 사용한다.

<input placeholder="입력값에 대한 힌트">

예제 코드를 통해 확인해 볼 수 있다