[UX/UI] HTML - 폼 컨트롤

폼의 양식

보통 요즘은 fieldset 테두리도 지우고, legend의 글자도 css로 없애는 편입니다

<!-- 필수속성 -->
<!-- action : 서버에 요청할 URL -->
<!-- method : post | get -->

<!-- 선택속성 -->
<!-- novalidate="novalidate" : form 안에있는 input의 자동 검증을 하지 않겠다는 옵션입니다. -->

<form action="" method="">
    <!-- 필드셋 : css로 테두리를 지우고 legend 내용도 안보이게 해주는게 보통이다. -->
    <fieldset>
        <legend>fieldset legend</legend>
        
        <label for=""></label>
        <input type="" id="" name="" value="">
    </fieldset>
    
    <input type="submit" value="전송">
</form>

 

버튼 : button | input

기능은 같지만, button에는 내부에 아이콘도 넣을 수 있고, 태그도 집어넣을 수 있기 때문에 디자인적인 면에서 많이 사용하는 편이다.

<input type="submit" value="전송">

<button type="submit">전송<button>

 

한 줄 문자입력 : input

label - for 속성과 input - id, name 속성을 동일하게 입력해야 합니다.

input 태그가 가지는 대표적인 속성

1) disabled = "disabled"

2) placeholder = "입력 힌트 문장"

3) autofocus="autofocus" : 처음에 어디에 포커스를 둘지 설정

4) required="required" : 필수입력항목 지정

5) autocomplete="on" : 자동완성 on | off

<!-- 한 줄 문자입력 -->

<!-- 1. text -->
<label for="userName">이름</label>
<input type="text" id="userName" name="userName" value="">

<!-- 2. password -->
<label for="userPassword">비밀번호</label>
<input type="password" id="userPassword" name="userPassword" value="">

<!-- 3.email -->
<label for="userEmail">이메일</label>
<input type="email" id="userEmail" name="userEmail" value="">

<!-- 4. url -->
<label for="webUrl">웹사이트</label>
<input type="url" id="webUrl" name="webUrl" value="">

<!-- 5. number -->
<label for="userOrder">주문수량</label>
<input type="number" id="userOrder" name="userOrder" min="1" max="20" value="">

<!-- 6. range -->
<label for="userRange">길이</label>
<input type="range" id="userRange" name="userRange" min="0" max="100" step="10" value="30">

<!-- 7. date (브라우저 호환이 안 될 수가 있기에 사용을 피하는게 좋습니다.) -->
<label for="userDate">제출일</label>
<input type="date" id="userDate" name="userDate" min="2017-09-10" max="2020-01-01">

<!-- 8. color -->
<label for="userColor">색상선택</label>
<input type="color" id="userColor" name="userColor" value="#ffffff">

<!-- 9. tel -->
<label for="userTel">연락처</label>
<input type="tel" id="userTel" name="userTel" value="010-0000-0000">

 

여러줄 문자입력 : textarea

css에서 width, height 를 조절하여 사용하지만, cols와 rows를 미입력시 에러가 날 수 있기 때문에 꼭 작성해줍니다.

<!-- 여러 줄 텍스트 -->
<label for="content">내용</label>
<textarea id="content" name="content" cols="50" rows="10"></textarea>

 

단일선택입력 : select

<!-- 선택입력 -->
<label for="localSelect">지역선택</label>
<select name="localSelect" id="localSelect">
    <option value="">서울</option>
    <option value="">대전</option>
    <option value="">대구</option>
    <option value="">부산</option>
</select>

 

단일선택입력 : input - radio

같은 name 값을 입력해 주어야 합니다.

<!-- 선택입력 -->
<span>성별</span>

<label for="male">남자</label>
<input type="radio" id="male" name="sex" value="male">

<label for="female">여자</label>
<input type="radio" id="female" name="sex" value="female">

css를 label과 input에 각각 다르게 줄 필요가 없는 경우에는 아래와 같이 사용하기도 합니다.

<!-- 선택입력 -->
<span>성별</span>

<label>남자<input type="radio"name="sex" value="male"></label>
<label>여자<input type="radio"name="sex" value="female"></label>

 

복수선택입력 : input - checkbox

<!-- 선택입력 -->
<span>취미는?</span>

<label for="trip">여행</label>
<input type="checkbox" id="trip" name="trip" value="trip">

<label for="read">독서</label>
<input type="checkbox" id="read" name="read" value="read">

<label for="movie">영화감상</label>
<input type="checkbox" id="movie" name="movie" value="movie">

<label for="game">게임</label>
<input type="checkbox" id="game" name="game" value="game">

css를 label과 input에 각각 다르게 줄 필요가 없는 경우에는 아래와 같이 사용하기도 합니다.

<!-- 선택입력 -->
<span>취미는?</span>

<label>여행<input type="checkbox" name="trip" value="trip"></label>
<label>독서<input type="checkbox" name="read" value="read"></label>
<label>영화감상<input type="checkbox" name="movie" value="movie"></label>
<label>게임<input type="checkbox" name="game" value="game"></label>

 

출처 : know-one-by-one.tistory.com/25