1. form 태그
encrype
자주 사용되는 속성값 "name", "method", "actioin", "encrype"
파일이나 이미지 업로드가 있는 폼은 반드시 enctype="multipart/from-data" 이 타입으로 지정을 해야 파일 업로드(전송)이 된다. 그래야 서버에 파일을 저장해서 처리 할 수 있다.
<form name="myform" method="post" action="./proc" enctype="multipart/form-data">
<input type="file" name="photo" required multiple>
<input type="submit" value="저장">
</form>
보안때문에 자동완성이나 입력 값 체크를 하지 않도록 하려면 qutocomoplete="off" 폼 속성과 "novalidate" 속성 사용
<form name="myform" method="post" action="./calc" target="calcframe"
autocomplete="off" novalidate>
<input type="text" name="vala" value="">+
<input type="text" name="valb" value="">+
<input type="range" name="valc" min="0" max="100" value="0">
<input type="submit" value="계산">
</form>
2. input 태그
placeholder="텍스트"
입력 필드에 예상되는 추천 값을 미리보기 하는 용도 <input> 태그 포커스 되면 사라짐
readonly
읽기 전용. 입력필드가 사용자 입력 불가한 상태가 됨. 페이지 로딩 시점에 지정된 value 값은 그대로 유지되고, disabled와 달리 폼 전송 시점에 값도 전송됨.
<!-- 검색창 -->
<input type="search" placeholder="검색어를 입력하세요..."/><form>
<!-- 읽기 전용 사용자 ID -->
<label for="userId">사용자 ID</label>
<input
type="text"
id="userId"
name="userId"
value="USER12345"
readonly
/>
<!-- 자동 계산된 결과 -->
<label for="totalPrice">총 금액</label>
<input
type="text"
id="totalPrice"
name="totalPrice"
value="₩50,000"
readonly
/>
</form>
hidden
로그인 폼에는 여러가지가 부가적으로 붙에 되는데 예를 들면 로그인 후 되돌아가는 페이지 값을 담는 히든 필드(Hidden Field)가 추가로 붙게 된다.
<input type="hidden" name="redirectUrl" value="https://jblogpack.tistory.com/manage">3. 사용 빈도가 낮은 고급 input 속성들
accept
.gif, .jpg, .png, .xls등 파일 확장자 <input> 태그를 파일 선택자로 쓰는 경우에 미디어 타입이나 파일 확장자 ("." 포함)으로 지정하면 해당 종류의 파일만 파일 선택 대화상자의 기본 필터 조건으로 적용됨(기본 선택값)
<input type="file" name="img" accept="image/*">
<input type="file" name="img2" accept=".jpg, .png">
accept="image/* "업로드 가능한 파일 형식을 제한하는 속성
image/*는 모든 이미지 유형(JPEG, PNG, GIF 등)을 허용.
특정 이미지 형식을 제한하고 싶다면
accept="image/png, image/jpeg"
pattern
사용 값: "정규표현식"
입력 요소의 입력 가능한 값 한정
예를들면 우편번호 입력시 다섯자리의 숫자만 입력 가능하게 할 때 쓴다.
단, 정규표현식 작성시 공백 체크까지 하지 않을 경우 미 입력 체크가 되지 않으므로 "required"와 함께 사용하는 것이 추천된다.
<form action="/search.php">
우편번호: <input type="tet" name="postal_code"
pattern="[0-9]{5}" title="5자리 숫자만 입력" required>
<input type="submit" value="주소찾기">
</form>
for 속성
입력 필드 만들 때 주의할 점들
일반 텍스트라면 <span></span> 태그 쓰지만 폼 필드는 기본적으로 <label></label> 태그 씀.
폼 필드화 함께 쌍으로 묶어 쓰는 <label>태그의 속성으로는 "for"이 사용 됨.
"이 라벨은 어떤 폼 필드를 위한 것이다." 라고 명시적으로 알려주는 용도.
속성값으로는 연결하는 폼 필드의 "ID"를 사용한다.
"for" 속성은
<label for="loginID">아이디</label>
<input type="text" id="loginId" name="loginId" value="" placeholder="ID">
이 코드를 웹 브라우저에서 열고 "아이디" 텍스트가 표시되는 텍스트 라벨을 클릭하면
ID 입력 요소에 포커스가 가면서 입력 커서가 깜빡인다. 이게 "for"이 하는 역할이다.
<label>태그의 텍스트를 특정 폼 필드에 종속되도록 해서 텍스트를 클릭하면 해당 입력 요소와 연동되어 동작하도록 해 준다.
disabled
"disabled" 속성은 별도의 속성값 없이 그냥 속성 정의만 해도 된다.
<button type="submit" disabled="disabled">로그인</button>
<button type="submit" disabled">로그인</button><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="post" id="autoForm" action="https://www.tistory.com/auth/login">
<input type="hidden" name="redirectURL" value="https://awesomepossum.tistory.com/manage">
<fieldset>
<legend class="screen_out">로그인 정보 입력 폼</legend>
<div class="box_login">
<div class="inp_text">
<label for="loginId" class="screen_out">아이디</label>
<input type="email" id="loginId" name="loginId" placeholder="ID">
</div>
<div class="inp_text">
<label for="loginPw" class="screen_out">비밀번호</label>
<input type="password" id="loginPw" name="password" placeholder="Password">
</div>
</div>
<button type="subit" class="btn_login" disabled>로그인</button>
<div class="login_append">
<div class="inp_c">
<input type="checkbox" id="keepLogin" class="inp_radio" name="keepLogin">
<label for="keepLogin" class="lab_g">
<span class="img_top ico_check"></span>
<span class="txt_lab">로그인 상태 유지</span>
</label>
</div>
<span class="txt_find">
<a href="/member/find/loginId" class="link_find">아이디</a>
/
<a href="/member/find/password" class="link_find">비밀번호 찾기</a>
</span>
</div>
</fieldset>
</form>
</body>
</html>
https://nahee.tistory.com/entry/UXUI-뜯어보기-회원가입-UI
UX/UI 뜯어보기 - 회원가입, 로그인 UI
지극히 주관적인 분석이니 잘못된 댓글 혹은 불편한 내용은 댓글 통해 남겨주세요 ヽ(✿ﾟ▽ﾟ)ノ 로그인 화면 통상 타 사이트에서 로그인을 클릭하면 로그인 페이지로 이동시키지만 잡코리아
nahee.tistory.com
'html&css' 카테고리의 다른 글
| [html/css] CSS flex란 무엇인가? (69) | 2024.12.10 |
|---|---|
| [html/css] 뮤직플레이어: 음악이 재생중일 때만 음악 정보 표시하는 css (68) | 2024.12.06 |
| [html/css] 이런 박스 div 에는 css 속성을 어떻게 줘야할까? (63) | 2024.11.26 |
| [html/CSS] 테이블 자동으로 생성해주는 사이트 TablesGenerator (6) | 2024.11.02 |
| [html&css] ⚡ CSS의 선택자 총정리, 선택자 우선순위 ! (0) | 2024.05.23 |
