01 회원가입 폼 만들기, input, text, email

*input, label

<label>이름: </label> 
<input>
<label>이메일: </label>
<input>

이름: <input> 에서 이름은 라벨이다. 라벨로 감싸준다

 

 

 

- input들은 고유의 id를 지정한다

<label>이름: </label> 
<input id="name">
<label>이메일: </label>
<input id="email">

지정을 해도 커서가 깜빡이지 않는다.

 

 

- label과 input을 연동 시켜야 됨

<label for="name">이름: </label> 
<input id="name">
<label for="email">이메일: </label>
<input id="email">

연동 시키면 이름: 이라는 글자를 눌렀을때 커서가 깜빡인다.

현재 코드로는 이름 이메일 작성창이 가로로 나열된다.

 

 

 

- 세로로 나열하기 위해서는 <p></p> 사용해준다.

<p>
  <label for="name">이름: </label> 
  <input id="name">
</p>
<p>
  <label for="email">이메일: </label>
  <input id="email">
</p>

 

사용자가 어떤 형태로 작성을 할지 type를 지정해준다.

<p>
  <label for="name">이름: </label> 
  <input id="name" type="text">
</p>
<p>
  <label for="email">이메일: </label>
  <input id="email" type="text">
</p>
<p>
  <input type="submit" value="전송"/>
</p>

하지만 전송 버튼 눌러도 넘어가지 않음.

form을 사용해야 넘길수 있다.

 

 

<form action="join.php"> 으로 반드시 action을 써준다.

<form action="join.php">
  <p>
    <label for="name">이름: </label> 
    <input id="name" type="text">
  </p>
  <p>
    <label for="email">이메일: </label>
    <input id="email" type="text">
  </p>
  <p>
    <input type="submit" value="회원가입"/>
  </p>
</form>

<form action="join.php"> 이 부분은 프로그래머와 협업 해야한다.

프로그래머에게 미리 파일이름 받던가 협의하기

input의 *이름도 프로그래머의 데이터베이스 이름과 맞춰야한다 *name="username" 을 일치시킨다.

 

<form action="#">
  <p>
    <label for="name">이름: </label> 
    <input id="name" type="text" name="username">
  </p>
  <p>
    <label for="email">이메일: </label>
    <input id="email" type="text" name="username">
  </p>
  <p>
    <input type="submit" value="회원가입"/>
  </p>
</form>

 

인풋의 타입을 지정해주지 않으면 email 주소형식이 맞지 않더라도 넘어간다.

<label for="email">이메일: </label>
<input id="email" type="email" name="username">

이메일을 asdasd 처럼 형식에 맞지않으면 경고문구를 보여준다.

 

form action="" 어떻게 전송해야할지에 대한 방법이 있어야한다.

<form action="" method="">

method 방식은 두가지

-post = 암호화되고 내용을 좀더 길게 가능  //민감한 방식에 적합(회원가입 로그인등)

-get = 암호화x  주소표시줄에 묻어간다. // 검색 방식에 적합

 

반드시 구분해서 쓰기