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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[html/css] 로그인 화면 html 코드로 알아보는 form, input 태그 속성

1. form 태그

encrype

2. input 태그

placeholder="텍스트"

readonly

hidden

3. 사용 빈도가 낮은 고급 input 속성들

accept

pattern

for 속성

disabled

'html&css' 카테고리의 다른 글

1. form 태그

encrype

2. input 태그

placeholder="텍스트"

readonly

hidden

3. 사용 빈도가 낮은 고급 input 속성들

accept

pattern

for 속성

disabled

'html&css' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<form name="myform" method="post" action="./proc" enctype="multipart/form-data">
	<input type="file" name="photo" required multiple>
	<input type="submit" value="저장">
	</form>

	<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>

	<!-- 검색창 -->
	<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>

	<input type="file" name="img" accept="image/*">
	<input type="file" name="img2" accept=".jpg, .png">

	<form action="/search.php">
	우편번호: <input type="tet" name="postal_code"
	pattern="[0-9]{5}" title="5자리 숫자만 입력" required>
	<input type="submit" value="주소찾기">
	</form>

	<label for="loginID">아이디</label>
	<input type="text" id="loginId" name="loginId" value="" placeholder="ID">

	<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>