FrontEnd/HTML
[HTML] input 속성 (type)
devwoodie
2022. 4. 18. 16:35
728x90
반응형
<input> 요소의 동작 방식은 type 특성에 따라 달라지므로 각각의 유형별 type을 지정 해야합니다.
특성을 지정하지 않은 경우, 기본 값은 text 입니다.
✔ type="text"
글을 입력 할 때 사용합니다.
< input type="text" />
ex)
✔ type="password"
입력한 글이 화면에 안보이도록 숨기는 역할을 합니다.
비밀번호를 입력 할 때 많이 쓰입니다.
< input type="password" name="pw" />
ex)
✔ type="submit"
form태그롸 함께 쓰입니다. form태그 내부에 있어서 클릭하게 되면 데이터 값을 서버로 전송 하게 됩니다.
<form>
<div>ID : <input type="text" name="id"/></div>
<div>PW : <input type="password" name="pw"/></div>
<div><input type="submit" value="전송"/></div>
</form>
ex)
✔ type="radio"
버튼을 라디로 옵션 박스로 만드는 것입니다. 여러 라디오 박스 중 하나만 선택이 가능 합니다.
name 속성을 이용하여 하나만 선택될 수 있게 만들어 줍니다.
<form>
<div><input type="radio" name="sex" value="male"/>남성</div>
<div><input type="radio" name="sex" value="female"/>여성</div>
<div><input type="submit" value="전송"/></div>
</form>
ex)
✔ type="checkbox"
여러 개 선택이 가능하도록 만들어진 체크박스 입니다. name값이 같더라도 여러 개 선택이 가능합니다.
<form>
<p>주문할 음식을 선택하세요.</p>
<div><input type="checkbox" name="chfood1" value="chfood1"/>짜장면</div>
<div><input type="checkbox" name="chfood2" value="chfood2"/>짬뽕</div>
<div><input type="checkbox" name="chfood3" value="chfood3"/>탕수육</div>
<div><input type="submit" value="전송"/></div>
</form>
ex)
✔ type="button"
가장 많이 쓰이는 타입으로 클릭했을 때 이벤트를 발생시킬 수 있습니다.
type="submit"은 클릭했을 때 form요소의 값을 전송하도록 일을 수행하지만 type="button"은 버튼을 눌러도 아무 동작을 하지 않는다. 동작을 하게 하려면 onclick속성에 javascript 코드 를 넣으면 됩니다.
✔ type="number"
숫자를 입력 받기 위한 값이다. text는 입력되지 않음며 숫자를 입력하게 되면 오른쪽에 컨트롤러가 생깁니다.
<form>
<p>주문할 음식 수량을 선택하세요.</p>
<div>짜장면<input type="number" name="chfood1" value="chfood1"/></div>
<div>짬뽕<input type="number" name="chfood2" value="chfood2"/></div>
<div><input type="submit" value="전송"/></div>
</form>
ex)
✔ type="tel"
유효성 체크는 되지 않지만 모바일 기기에서 입력할 때 자동으로 숫자 패드가 나타납니다.
<form>
<p>전화번호를 입력하세요.</p>
<div><input type="tel" name="tel"/></div>
<div><input type="submit" value="전송"/></div>
</form>
ex)
728x90
반응형