폼 요소는 웹사이트에서 사용자로부터 데이터를 입력받아야 하는 경우 사용되는 요소입니다.
: 서버에 데이터를 전달하기 위한 요소들.
<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과 동일하게 동작함.
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
HTML_폼요소3 <label,fieldset,form> (0) | 2020.03.19 |
---|---|
HTML_폼요소 2 <SELECT,TEXTAREA,BUTTON> (0) | 2020.03.19 |
HTML_테이블 요소(표) (0) | 2020.03.18 |
HTML_이미지 요소 (0) | 2020.03.18 |
HTML_리스트 요소(UL태그/OL태그/DL태그) (0) | 2020.03.18 |
댓글