입력창 만들기

01_ input 태그 만들 때

1) form 태그 속성

• name : form 태그를 식별하기 위한 이름
• action : form을 전송할 서버쪽 스크립트 파일경로와 이름을 지정
• method : form을 서버에 전송할 http 메소드를 지정(GET or POST)

2) fieldset

• form 태그 안의 요소들을 그룹화하기 위한 용도

3) legend

• fieldset의 제목

4) input 초기화

• outline : 0; (input 클릭 시 나오는 테두리 없애줌)
• border : 0; (기본 테두리 없애줌)
• padding: 0; (기본 padding값 없애줌)

5) input 속성

• type : input 안에 어떤 컨텐츠가 들어와야 하는지 선언
• title : 툴팁 역할
• maxlength : input 안에 입력할 수 있는 최대 길이
• placeholder : 어떤 내용을 입력해야하는지 알려주는 힌트 기능

02_ Button 태그 만들 때

1) 초기화

• border : 0; or none; (기본 테두리 없애줌)
• background-color : transparent; (배경색 없애줌)
• cursor : pointer; (버튼 위에 마우스 오버 시 포인터로 변경)

2) 속성

• type : button의 기능을 선언해주는 것으로 반드시 써주자!
  (일례로, type:button 의 용도로 만든것인데, 생략했더니 입력창 안에 내용을 넣고 Enter를 누를때 해당 버튼이 사라지는 현상을 발생했다. 즉, submit처럼 같이 제출되는 현상이 생겨서... 꼭 써주자!)