[생활코딩/2015 HTML 수업 : WEB1 아님! 혼동 주의!] Form 배우기. 입력 양식? 텍스트 입력?

링크 : opentutorials.org/course/2039/10944

입력양식 - form - 생활코딩

 

1. 입력 양식 (로그인 양식을 만든다고 했을 때!)
: <form> 태그를 사용하기 전에
 ex) <p> 아이디 : <input type="text> </p> ★ <input>은 닫는 태그 읎다!
<p> 비밀번호 : <input type="text> </p> 근데 이렇게 설정해놓으면
패스워드가 다 보여지기 때문에 input 태그에서 type 속성을 "password"로 설정해줘야 한다.
그렇게 해야!! 패스워드에 무언갈 입력해도 까만콩으로 보안된다.

 

이제 웹 브라우저에서 입력하여 웹 서버가 있는 컴퓨터로 아이디와 패스워드를 전송해야 할 버튼을 만들어보자!
<input type="submit"> 일반적으로 '제출하다.'란 의미니까 type 속성을 'submit'으로 써주면 버튼이 생성된다.

 

★ 이제 중요한 건 우리가 입력한 정보들이 과연 '어디'로 전송될 건인지가 정해지지가 않았다!
이때, <form> 태그를 사용하자.
ex) <form  action="http://localhost/login.php">

      <p>  아이디 : <input type="text"> </p>
      <p> 비밀번호 : <input type="password"> </p>
      <p>  주소 : <input type="text"> </p>
      <input type="submit">
    </form>

 

★ 어디로 보내야 할 것인지! 할때 <form> 태그의 action 속성 "이곳에 URL을 적어주자. "

뭐 예를 들어, 웹사이트를 만드는 상황에서 누군가 로그인 정보는 http://localhost/login.php 여기로 보내게 해주세요! 라고 했다면 위처럼 설정해주면 된다.

 

★ 근디, 여기서 문제가 발생한다. 뭐냐? '아이디'와 '주소'를 전송하는 것에서 <input> 태그의 type 속성이
둘 다 텍스트이기에 전송된다 하더라도 데이터를 구분하기 힘들다. 그렇기 때문에 이 각각의 입력하는 칸 즉, '컨트롤'이라 하는 칸에 각각의 이름을 설정해주어야 한다!! 그럼 어떻게 이름을 설정해 주느냐? ★

 

ex) <form  action="http://localhost/login.php">

      <p>  아이디 : <input type="text" name="id"> </p>
      <p> 비밀번호 : <input type="password" name="pw"> </p>
      <p>  주소 : <input type="text" name="address"> </p>
      <input type="submit">
    </form>

 

<input> 태그의 'name'이란 속성을 사용해준다. 이름은 원하는 대로 지어도 되는 것 같다. 한글은 아마 안될듯?

그래서 만약, 아이디의 컨트롤에 1, 비밀번호에 2, 주소에 3을 입력했다면 연동된 주소는 위 사진처럼 된다!

앞의 로컬호스트/로그인.php는 <form>의 전송될 주소와 id pw address의 값이 다 나타나게 된다!!! 신기

 

2. 텍스트 입력
: 사용자로부터 텍스트를 입력받도록 하는 폼 태그에 대해 알아보자.

★ <input> 태그 사용 시, name이란 속성을 사용해야 서버쪽에서 정보를 찾을 수 있다! 그래서 꼭 name을 설정해줘야 한다잉! 만약, 이 컨트롤 칸에 입력하지 않아도 특정 값이 나오도록 설정하고 싶다면 <input> 태그에서 value 속성을 사용하면 된다. 즉, <input name="id" value="default value"> 라고 선언하면, 그 컨트롤 칸에 "default value"란 값이 적혀 있는 채로 나타나게 된다.

★ 만약 <form> 태그에서 여러줄을 입력받고 싶은 컨트롤을 만들고 싶다면 <textarea> </textarea> 태그를 사용한다!
(form-input의 부모-자식 관계처럼 / form-textarea)
textarea 태그의 속성인 cols(column : 열)와 rows(줄)를 사용하여 컨트롤의 크기를 넓힐 수 있다.
다만, <input> 태그와의 차이점이라 한다면 '특정 값'을 처음부터 컨트롤에 보이게 하고 싶다면 value란 속성을 사용하는 게 아니라 <textarea> </textarea> 태그 사이에 적어주면 그 적힌 값이 기본 형태로 나타나게 된다!!

 

ex)  <form action="">
        <p>text : <input type="text" name="id" value="default value"></p>
        <p>password : <input type="password" name="pwd" value="default value"></p>
        <p>textarea :
            <textarea cols="50" rows="2">default value</textarea>
        </p>
    </form>