input의 사용과 css커스터 마이징

input Tag는 html문서에서 정보를 입력받는 용도로 사용한다.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

 

 

- input 태그의 종류별 사용법 -

 

1. 텍스트 입력을 받는 인풋(텍스트 필드)

<form action="">
	<input type="text" id="" class="input_box" placeholder="안내텍스트" title="통합검색">
	<input type="submit" value="검색" id="" name="">
</form>

<label for="매칭값">은 <input name="매칭값">또는 <input id="매칭값">과 맞물린다.

<label>의 위치는 <input>의 전/후와 크게 상관없는 듯...
하지만 라벨을 숨길때는 웹접근성을 고려해야겠지?

// 웹 접근성 관련
<label for="total_keywordSearch" class="blind">통합검색</label>
<input type="text" placeholder="검색어를 입력하세요" id="total_keywordSearch">

css 적용

input[type="text"] { }로 적용할 수 있지만 공통요소에 적용하기보단 가급적 다른 클래스를 따로 주는것이 좋다

.input_box {
    width:200px; /* 가로크기 */
    height:60px; /* 세로크기 */
    border:1px solid #ccc; /* 선 두께 타입 색상 */
    background:#fff; /* 배경색상 */
}

 

---

 

2. 라디오 버튼용 인풋

라디오 버튼은 폼안의 요소들끼리 단일선택시 사용한다

<input type="radio" name="" value="" id="ID값">
<label for="ID값">라벨명</label>
// input에 ID값을 부여하는 이유는 라벨영역을 클릭해도 선택이 적용되도록 구현하기 위함

// input에 ID값을 지정하지 않을 경우엔 아래처럼 사용함
<label for="이름값">
    <input type="radio" name="이름값" value="" id="">
    <span>라벨명</span>
</label>

 

See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.

 

 

---

 

3. 체크박스용 인풋

체크박스 버튼은 폼안의 요소들끼리 다중선택시 사용한다

<input type="checkbox" name="" value="" id="ID값">
<label for="ID값">라벨명</label>
// checkbox에 ID값을 부여하는 이유는 라벨영역을 클릭해도 선택이 적용되도록 구현하기 위함

// checkbox에 ID값을 지정하지 않을 경우엔 아래처럼 사용함
<label for="이름값">
    <input type="checkbox" name="이름값" value="" id="">
    <span>라벨명</span>
</label>

 

See the Pen input checkbox custom by Yongkyu, Lee (@Yongkyu) on CodePen.

 

---

4. 기본속성을 숨기고 버튼식으로 사용

 

See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.