[HTML / 시맨틱 마크업] 폼 (Form) - Textarea, Buttons

Textarea

📌 <textarea></textarea>

• 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.

　　cf. <input type="text" /> 는 간단한 한 단락의 글만 가능하다.

 

 

속성

autocomplete	컨트롤 값이 브라우저에 자동으로 완성될 수 있는지의 여부를 나타낸다. (on/off)
autofocus	페이지가 로드됐을 때, 포커스를 오버라이드(ex. 사용자가 다른 컨트롤 폼에 타이핑)하지 않는다면, 폼 컨트롤이 입력 포커싱될지 지정한다. 이때, 문서에서 오직 하나의 폼 관련 요소만 이 속성이 지정될 수 있다.
cols / rows	textarea의 너비/높이를 지정한다. (CSS에서 height, width로 더 손쉽게 지정 가능)
disabled	사용자가 컨트롤과 상호작용할 수 없도록 한다.
maxlength / minlength	사용자가 입력할 수 있는 문자(Unicode points)의 최대/최소 개수를 지정한다.
placeholder	컨트롤에 입력할 수 있는 항목에 대한 안내로, 캐리지 리턴이나 개행이 포함되어서는 안된다.
readonly	사용자가 컨트롤의 값을 수정할 수 없다는 것을 가리킨다. cf. disbled 속성과 다르게 readonly 속성은 사용자가 컨트롤을 클릭하거나 선택하는 것을 막지 않으며 컨트롤의 값은 폼과 함께 제출된다.
required	사용자가 폼을 제출하기 전 반드시 값을 채우도록 한다.

 

 

• [참고] 캐리지 리턴(Carriage Return) : 현재 위치를 나타내는 커서를 틀 맨 앞으로 이동
• [참고] 라인피드(Line Feed) : 커서의 위치를 아랫줄로 이동
• [참고] 👉 윈도우에서는 이 두 동작을 합쳐 Enter 동작을 해냄

 

 

 

---

Buttons

양식 제출용 버튼이 아니라면 type 특성을 button으로 지정해둬야 한다.

 

 

특성

autofocus	페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타낸다. 문서 내 하나의 요소만 해당 특성을 가질 수 있다.
disabled	버튼과 사용자의 상호작용을 막는다.
form	▪️ 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해 버튼과 form을 연결한다. 해당 특성 이용 시 버튼을 form 요소에 넣지 않고도 연결할 수 있고, 조상 중 <form>이 있더라도 소유자를 재정의할 수 있다. ▪️ 이때, form 특성을 지정하지 않았으나 조상 중 form 요소가 존재하면 해당 form과 연결된다.
formaction	▪️ <button>이 제출 버튼이면서 제출한 정보를 처리할 URL을 지정한 경우, 버튼 양식 소유자가 가진 action 특성보다 우선한다. ▪️ 이때, 양식 소유자가 존재하지 않으면 영향을 주지 않는다.
formenctype	▪️ <buttton>이 제출 버튼인 경우, 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정한다. ▪️ 인코딩 형식을 지정한 경우 버튼 양식 소유자가 가진 enctype 특성보다 우선한다. 　👉application/x-www-form-urlencoded : 기본값 　👉multipart/form-data : type 특성이 file인 <input>이 존재하는 양식에 사용한다. 　👉text/plain : 디버깅 전용으로 명세에 추가된 값으로, 실제 양식 제출 시 사용해서는 안된다.
formmethod	▪️ <button>이 제출 버튼인 경우, 양식을 서버로 제출할 때 사용할 HTTP 메서드(GET | POST)를 지정한다. ▪️ 지정한 경우, 버튼의 양식 소유자가 가진 method 특성보다 우선한다.
formnovalidate	▪️ <button>이 제출 버튼인 경우, 양식 제출 시 유효성 검사를 하지 않겠다는 것을 지정한다. ▪️ 지정한 경우, 버튼의 양식 소유자가 가진 novalidate 속성보다 우선한다.
formtarget	▪️ <button>이 제출 버튼인 경우, 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있다. ▪️ 지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선한다. 　👉_self : 응답을 현재 브라우징 맥락에 표시하며, 기본값이다. 　👉_blank : 응답을 새로운 브라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다. 　👉_parent : 응답을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않을 시 _self와 동일하게 나타난다. 　👉_top : 응답을 최상단 브라우징 맥락에 표시한다. 부모가 존재하지 않으면 _self와 동일하게 행동한다.
name	버튼의 이름으로, 버튼의 value 특성과 함께 양식 데이터의 일부를 구성한다.
value	버튼의 초기값으로, 버튼의 name 특성과 함께 양식 데이터의 일부를 구성한다.

 

 

button과 input

• input은 value 특성에 텍스트값밖에 지정할 수 없다.
• 하지만 button은 내부 HTML 콘텐츠(<em>, <strong>, <img>) 뿐만 아니라 ::after와 ::before 의사 요소를 사용하는 복잡한 렌더링도 가능하다.

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea

<textarea> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

<button>: 버튼 요소 - HTML: Hypertext Markup Language | MDN

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME