HTML_입력요소 (feat. <input>)

<input>

  지난 시간에 form을 다뤄보았는데

  input을 알아보기 전에 form을 다뤄서 조금 아쉬운 부분이 있었다.

  그래서 오늘은 아쉬운 부분을 채우고자 input을 파헤쳐볼 생각이다.

 

  매우 유용하고 많이 사용되는 태그인데,

  이 태그의 목적은 '사용자가 어떤 정보를 입력하도록 하는 것'이다.

  예를들면 로그인할때 아이디를 적는 칸, 암호를 적는 칸, 로그인 버튼 등

  사용자가 사용하는 공간을 제공한다.

 

  그럼 먼저 텍스트 입력을 만들어보자.

예재

  역시나 간단하게 작성한 만큼 간단한 출력물이 나왔다.

  위와 같이 텍스트를 입력할 수 있는 칸이 생성된다.

  다른 속성과 함께 사용해보자.

예재

  사진이 그냥 보면 작아 안보이시는 분들은 눌러서 확대해주세요.

  위와 같이 속성 두개를 더 추가해보았다.

  name="name" // 텍스트 입력공간을 'name'이라는 이름으로 지정

  placeholder="이름을 입력하세요." // 빈칸으로 텍스트공간이 존재할 경우 '이름을 입력하세요.'가 표시

 

  다음은 암호를 추가해보자

예재

  사진이 그냥 보면 작아 안보이시는 분들은 눌러서 확대해주세요.

  보이는 것과 같이 타입을 password로 지정했는데

  이 속성으로 텍스트를 입력했을때 화면에 보여주지 않고

  점으로 표시해 정보를 보안화 할 수 있다.

 

  다음으로는 체크박스를 추가해보자.

예재

  이와 같이 checkbox를 이용해 세개의 체크박스를 생성하고 사용자가 체크할 수 있도록 할 수 있다.

  여기서 name="eat"부분은 주제가 되는 것이고, value=" "부분은 어디에 체크했는지 기록하게 된다.

  하지만, 이렇게 중복체크박스 말고도 하나만 선택해야하는 체크박스를 만들 수 있는데

  아래와 같이 선택박스를 만들어보자.

예재

  선택박스의 type속성은 radio라는 값을 가지는데,

  이는 라디오기기를 조작할때 한개버튼이 눌려있어도

  다른버튼을 누르면 기존 버튼은 다시 튀어나오는 묘사에서 나온 것이라는 이야기가 있다.

  마찬가지로 name="sex distinction"은 주제가 되는데 이 선택박스는 주제가 필요하다.

  바로 '같은 name속성 안에서 선택한다.'라는 특성이 있기때문에,

  name을 다르게 지정한다면 중복으로 선택이 가능하다.

 

  자 그럼 이렇게 입력한 사용자의 정보를 전송하는 버튼을 만들어보자

예재

예재

  위와 같이 아래에 type="submit"을 지정하면 버튼이 생기고,

  value=""로 그 버튼에 입력 할 텍스트를 지정했다.

  정보를 전송하기 위해서는 지난시간에 배운 form태그가 같이 들어가야 하기 때문에

  <form action="http://localhost/data.php">태그를 지정하였다.

  전송 정보 중 암호가 있기때문에 method 속성을 post로 지정하면 더 좋을 것 같다.

 

  다음으로는 파일업로드를 추가해보자

예재

  점점 내용이 길어지기 시작한다.

  신분증 첨부라는 내용으로 type="file"을 지정하고 이름은 id card로 정의 했다.

  type="file" 속성을 사용할땐 form태그의 속성에

  enctype="multipart/form-data"를 필수로 작성해 주어야 한다.

 

  자 입력한 내용을 모두 지우고 싶을땐 어떻게 해야할까

  초기화 버튼도 만들어주자

예재

  이렇게 type="reset"을 작성하고 이름은 초기화로 지정하니

  무슨내용을 작성해도 초기화버튼을 누르면 전부 처음으로 돌아간다.

 

  여러줄로 만들어서 어려워보이지만 하나하나 이해하면 어렵지 않다는 것을 알 수 있다.

 

<input> - type text/password/checkbox/radio/file/submit/reset