Form - input (#15)

 

 <input type="text" />

가장 기본적인 검색 폼입니다

<input type="text" placeholder="아이디를 입력하세요" />

검색 폼에 안내문구를 작성할 수 있습니다 폼에 입력을 하려고 할 때 해당 문구는 사라집니다

<input type="text" placeholder="아이디를 입력하세요" minlength="5" />

최소 00자리 이상 입력을 해야하는 곳에 쓰입니다 minlengtt="5"를 입력했으니 최소 4자 이상으로 입력을 해야합니다

<input type="text" placeholder="아이디를 입력하세요" maxlength="10" />

minlength와 반대로 maxlength="10"은 10자리를 넘길 수 없다는 뜻입니다

<input type="text" placeholder="아이디를 입력하세요" minlength="5" maxlength="10" required />

required 속성을 추가하게되면 해당 폼에 뭔가 입력을 하지 않으면 다음 페이지로 넘어갈 수 없습니다 회원가입 창을 보면 필수 문구(이름,주민번호 등)에 쓰입니다

 <input type="text" placeholder="아이디를 입력하세요" minlength="5" maxlength="10" disabled />

disabled 속성을 입력하면 해당 폼에 아무것도 입력할 수 없습니다 쓰임새는 여러가지 있으니 찾아보셔도 좋습니다

 <input type="text" value="아이디를 입력하세요" />

value는 placeholder과 비슷하지만 value는 안내문구가 복사도 가능하고 도움말 처럼 사용이 가능합니다

 <input type="email" placeholder="이메일을 입력하세요" />

type에 email를 작성하지 않을경우 해당 알람메시지를 띄우게 됩니다

<input type="password" placeholder="비밀번호를 입력하세요" />

비밀번호를 입력할 수 있게 해주는 타입이며 보안상 해당 값이 보이지 않게 됩니다

활용해서 minlength="5"를 추가하면 이렇게 입력 가능합니다

<input type="url" placeholder="주소를 입력하세요" />

마찬가지로 인터넷에 쓰이는 웹사이트 주소를 입력해야합니다

<input type="number" placeholder="번호를 입력하세요" />

number 타입은 숫자 이외에 아무것도 입력되지 않습니다

 

minlength,maxlength는 내가 입력할 수 있는 자체 개수를 정한다면 min,max는 입력할 수 있는 최솟값을 입력할 수 있습니다

minlength,maxlength는 텍스트 개수라면 min,max는 숫자 값을 의미합니다

<input type="number" min="5" placeholder="번호를 입력하세요" />

<input type="number" max="100" placeholder="번호를 입력하세요" />

<input type="file" placeholder="파일을 삽입하세요" />

<input type="file" accept=".png, .jpg" placeholder="파일을 삽입하세요" />

혹은 파일 형식이 .png 나 .jpg만 삽입 가능했으면 좋겠다라고 한다면

accept=".png, .jpg"를 사용합니다

임시로 만든 word 파일은 비활성화 되어있습니다

 

여기까지입니다 폼과 알려드린 속성,타입을 활용하여 회원가입 폼을 만들어보세요 많은 도움이 됩니다