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
'Coding > html&css' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [html/css] CSS flex๋ ๋ฌด์์ธ๊ฐ? (67) | 2024.12.10 |
|---|---|
| [html/css] ๋ฎค์งํ๋ ์ด์ด: ์์ ์ด ์ฌ์์ค์ผ ๋๋ง ์์ ์ ๋ณด ํ์ํ๋ css (66) | 2024.12.06 |
| [html/css] ์ด๋ฐ ๋ฐ์ค div ์๋ css ์์ฑ์ ์ด๋ป๊ฒ ์ค์ผํ ๊น? (63) | 2024.11.26 |
| [html&css] โก CSS์ ์ ํ์ ์ด์ ๋ฆฌ, ์ ํ์ ์ฐ์ ์์ ! (0) | 2024.05.23 |
| [html&css] โก CSS ํฌ๊ธฐ์ ๋จ์ px, em, rem ์ฐจ์ด (0) | 2024.05.23 |
