<input> 태그 속성

1. name, id, class 속성

 

이 속성들은 일종의 이름을 지을 수 있다는 점에서 공통점을 갖고 있지만,

제각기 사용하는 목적이 상이하기 때문에 그 차이를 알고 사용해야 한다.

 

name 속성의 경우 일종의 파라미터로 사용되는 값으로 이에 해당하는 이름으로 서버에 값이 넘어간다는 특징이 있다.

예를 들어 다음과 같은 코드가 있다고 해보자.

<input type="text" value="text" name="text">

이렇게 나타난 텍스트 상자에 "안녕하세요"를 작성해서 submit 하게 되면

그 값은 다음과 같이 서버로 넘어간다.

text=안녕하세요

서버로 넘어가는 때에 사용하기 때문에 사용 가능한 곳도 제한적이다는 특징이 있다.

name 속성의 특징
1️⃣ name 속성에 부여한 이름으로 파라미터가 서버 측으로 넘어 간다.
2️⃣ 사용 가능한 태그가 제한적이다. (a 태그, img 태그, input 태그)

 

id 속성의 경우에는 문서에서 사용하는 식별자로 중복되어서는 안 된다는 특징이 있다.

name 과는 달리 모든 태그에서 사용할 수 있는 속성이며, 

이름은 자바의 변수명 만드는 것처럼 camelcase 방법을 적용할 수 있다.

 

또한 id 속성은 js 작업을 할 때 추가하는 것이 좋은데 그 이유는 일종의 인덱싱 작업이기 때문에

js 코드 상에서의 탐색 효율이 좋아지기 때문이다. 

id 속성의 특징
1️⃣ 중복을 허용하지 않는다.
2️⃣ 모든 태그에서 사용할 수 있는 속성이다.
3️⃣ camelcase 로 이름을 지을 수 있다. (예) userId, userPassword ...)
4️⃣ js 의 탐색 효율에 좋다.

 

class 속성은 id 와 달리 특정 객체가 아닌 묶어서 사용하기 위한 속성으로 즉 중복해서 사용 가능하다.

id 속성과 공통적인 부분도 있는데 바로 class 속성 또한 모든 태그에서 사용할 수 있다는 것이다.

 

네이밍 방법은 snakecase 를 사용하여 - 또는 _ 를 사용하여 이름을 표현하며,

가능한 '형태-의미-순서-상태' 를 지키는 것이 좋다.

class 속성의 특징
1️⃣ 중복 허용한다.
2️⃣ 모든 태그에서 사용할 수 있는 속성이다.
3️⃣ snakecase 로 이름을 지을 수 있다. (예) btn-submit-01 ...)

 

2. autofocus : 입력 커서 표시

 

autofocus 를 속성으로 추가하면 페이지를 불러왔을 때 해당 태그 영역에 입력 가능한 상태로 커서가 깜빡이는 것을 확인할 수 있다.

 코드에서는 다음과 같이 추가하면 된다.

<input type="text" name="text" autofocus>

📌 autofocus 는 속성이기 때문에 원래대로라면 

<input type="text" name="text" autofocus="autofocus">

이렇게 작성했어야 했지만, 같은 값을 반복적으로 작성하기 때문에 현재는 위의 예시와 같이

해당 기능을 on 시키기 위하여 한 번만 작성해도 정상적으로 기능하게 되었다.

 

 

3. placeholder : 예시 써주기

 

간혹 입력란에서 무엇을 입력해야 할지 사용자 측에서 모를 수 있는데,

이러한 경우를 줄이기 위하여 입력란에 예시 문구를 작성하는 것으로 해결한다.

코드로는 다음과 같이 작성할 수 있다.

<input type="text" placeholder="이름을 입력해 주세요" name="text">
<input type="tel" placeholder="전화번호를 입력해 주세요" name="tel">

placeholder 로 작성한 내용은 사용자가 무엇을 작성하면 자동으로 사라지며,

내용을 모두 지우면 다시 나타난다는 특징이 있다.

 

 

4. autocomplete : 자동 완성

 

해당 페이지에서 사용자가 기록한 내용을 저장했다가

사용자가 해당 박스에 다시 접근했을 때에 그것을 툴팁 박스로 보여주는 형태이다.

기본값은 on 이고, 코드 상에 작성하지 않아도 on 상태이기 때문에

해당 기능을 사용하고 싶지 않다면 명시적으로 다음과 같이 코드로 표현하면 된다.

<input type="text" placeholder="이름을 입력해 주세요" name="text" autocomplete="off">

또는 광역 범위로 autocomplete 기능을 꺼두고 싶다면 form 태그에서도 가능하다.

<form autocomplete="off">

이렇게 하면 해당 form 태그 내부에 작성되는 모든 태그에 적용되기 때문에 하나씩 지정하지 않아도 된다는 장점이 있다.

 

 

5. readonly : 읽기 전용 필드

 

속성의 이름처럼 해당 속성을 사용하는 필드는 사용자 측에서는 오직 읽기만 가능한 필드가 된다.

<input type="text" placeholder="이름을 입력해 주세요" name="text" readonly>

이 때 박스에 대한 포커스는 가능하지만 입력 커서가 뜨지는 않는다.

 

 

6. formaction, formmethod, formnovalidate : form 관련 속성

 

formaction 은 기존에 form 태그에서 작성한 action 속성을 무시하고 개별적인 action 을 취할 수 있도록 하는 속성이다.

즉, submit 기능을 수행할 수 있는 태그에서만 가능하면 다음과 같이 사용할 수 있다.

<input type="submit | image" formaction="url 작성">
<button formaction="url 작성"></button>

formmethod 또한 form 에 작성한 method 속성 값을 무시하고 개별적인 method 방식을 가질 수 있는 속성이다.

예를 들어 form 에서는 get 방식을 취하더라도 formmethod 를 통해 post 방식을 사용할 수도 있다는 것이다. 

// form method="post"
<button>수정</button>
<button formmethod="get">삭제</button>

formnovalidate 속성은

해당 페이지의 데이터를 서버로 전송할 때 데이터가 유효한지에 대해 그 검증을 무시하겠다는 속성이다.

form 태그 내부에서도 novalidate 속성이 있어 폼 자체에 대한 유효성 검증을 무시할 수도 있다. 

 

명시하지 않은 상태에서는 false 값을 가지고 있고, 명시하게 되면 true 값으로 전환된다.

또한 서버로 보낼 때의 상태 체크이기 때문에 formaction 속성과 마찬가지로 

submit 기능을 수행할 때만 formnovalidate 속성을 사용할 수 있다. 

<input type="submit | image" formnovalidate>
<button formnovalidate></button>