본문 바로가기
Spec UP - Frontend/부스트코스_UI 개발

HTML_폼요소 <INPUT>

by TIS_Ha 2020. 3. 19.
반응형

폼 요소는 웹사이트에서 사용자로부터 데이터를 입력받아야 하는 경우 사용되는 요소입니다.

: 서버에 데이터를 전달하기 위한 요소들.

 

<input>

대표적인 폼 요소로 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다.

ex:) <input type="text">

여기서 type의 속성 값으로는 text, password, radio, checkbox, file, image, submit, reset, button 등이 있다.

 

<input type="text">

text 속성값 : 사용자가 입력할 수 있도록 텍스트 상자 생성.

placeholder 속성값 : 사용자가 텍스트상자를 클릭하기 전 입력한 정보를 보여줄 수 있음.

 

<input type="password">

password 속성값 : 사용자가 데이터를 입력 시 암호화하여 화면에 보이지 않도록함.

 

<input type="radio">

radio 속성값 : 주로 사용자가 목록 중 한가지만 선택해야하는 경우 이용.

radio 속성값 설정 시 중복선택이 불가능하도록 해당 목록들을 같은 name끼리 묶어 선언해주어야합니다.

사용자가 선택하기 전 미리 기본적으로 체크가 되게 하고싶은경우 checked를 추가하면 됩니다.

<input type="radio" name="age" checked>

 

<input type="checkbox">

checkbox 속성값 : 주로 사용자에게 중복선택을 허용하는 경우 사용합니다.

 

<input type="file">

file 속성값 : 사용자가 파일을 업로드할때 사용합니다.

<input type="submit"> <input type="reset">

submit : form의 값을 서버로 전송하는 버튼 (제출 기능)

reset : form의 값을 초기화하는 버튼

button : 기능이 없는 버튼. 개발자가 기능을 설정해 주어야함.

버튼이름은 value 속성값으로 수정 가능함.

 

<input type="image" src="" alt="" width="" height="">

image 속성값 : 이미지파일을 삽입하여 버튼을 생성하며 submit과 동일하게 동작함.

 

 

 

반응형

댓글