HTML 들어가기 -1(table,form)

심민기·2022년 4월 14일
0

기초공부

목록 보기
19/25

기본

p br img 태그

table 태그 데이터가 될 값을 td태그로 묶는다. 각각의 행을 묶는다 tr 태그 -- table row-- row는 행이란 뜻. 그리고 이걸 table 태그로 묶어 표를 만든다. 표에 테두리를 주려면 table border= 1로 주면 된다. 그럼 일케 나옴

의미론적인 태그를 부여해보면(thead, tbody로 코드 구분.)
thead로 제목 부분을 구분하고 td태그를 th태그로 바꾸게되면.


이렇데 제목이 강조된다.

이런식의 의미론적 태그는 thead tbody tfoot이 있고 이들을 쓰게 되면 만약 thead를 가장 아래쪽에 쓴다고 해도 웹페이지상에서는 맨 위에 출력되게 된다.

<html><body> <table border="1">
<thead>
      <tr> <th>이름</th>  <th>성별</th> <th>주소</th>  </tr>
    </thead>
    <tbody>
      <tr> <td>심민기</td>   <td></td>  <td>서울</td>  </tr>
      <tr>  <td>미라이</td> <td></td>  <td>교토</td>  </tr>
    </tbody>
  </table></body></html>

 

중복되는 데이터가 있을 경우에는 칸을 나누지 않고 그 칸들을 하나로 하고 싶다.
이떄 쓰는 것이 병합이다.
병합하려는 것의 행에있는 td 태그에다가 rowspan="2"라고 하면 로우는 행이란 뜻이므로 두개의 행이 병합된다는 것.즉 태그를 기준으로 아래의 하나 행을 병합.

이렇게 입력되고 중복되는 아래행의 데이터는 지우면 된다.
그럼 이렇게 나온다

그럼 가로줄의 데이터, 열의 데이터는 어떻게 병합하나??

을 하게 되면 col이란 것은 칼럼의 수를 말하므로 3개의 열이 합쳐진다.

이런 식으로다가.

form

사용자가 입력한 정보를 서버로 전송. input 태그를 통해 사용자로부터 텍스트 정보를 받아옴.

아이디 :

비밀번호 :

이렇게 코드를 작성하여 ![](https://velog.velcdn.com/images/mingi001/post/55a494ce-fbee-4c48-a4d5-5dae12439e9e/image.png) 이런 화면을 얻을 수 있으며 비밀번호의 글자 가림은 password라는 타입을 입력하여 구현할 수 있다.

을 추가하여 제출버튼을 추가하자.

이렇게 입력받은 정보를 서버로 전송하기 위해서는 form 태그로 묶은 뒤 action을 통해서 정보를 전송할 주소를 정해야 한다.

그럼

<form action="http://localhost/login.php">
    <p>아이디 : <input type="text" name="id"></p>
    <p>비밀번호 : <input type="password" name="pwd"></p>
    <p>주소 : <input type="text" name="address"></p>
    <input type="submit">
</form>

이렇게 코드가 작성되고 그 결과물은.


이렇게 되어 로그인을 하면 주소로 이동하게 된다.

form 태그, 문자입력.

name 값 -- 서버에서 정보를 구별하기 위한 값.
value 값 -- 사용자가 기본적으로 보게 되는 값.

textarea 태그 -- 여러 줄의 값을 입력 받아야 할때.

col은 column의 줄임말(열), row는 행. 즉 행과 열의 크기를 지정.

Dropdown list

선택지를 주는 태그
<html>    <head> <meta charset="utf-8"></head><body>
      <form action="http://localhost/color.php">
          <h1>색상</h1>
          <select name="color">
              <option value="red">붉은색</option>
              <option value="black">검은색</option>
              <option value="blue">파란색</option>
          </select>
          <h1>색상2 (다중선택)</h1>
          <select name="color2" multiple>
              <option value="red">붉은색</option>
              <option value="black">검은색</option>
              <option value="blue">파란색</option>
          </select>
          <input type="submit"> </form> </body></html>        

option은 선택지라는 뜻, select태그로 묶어야만 선택이 가능하다.
그럼 드롭다운 리스트가 만들어진다.

버튼

```
</form></body></html>

            ```

인풋의 여러 타입들을 통해 버튼들에 대해 알아보자.

radio를 통해서

하나의 버튼을 얻을 수 있다

같은 이름으로 묶은 버튼들은 동시에 눌러도 하나의 버튼만 활성화된다.


두개의 이름이 같은 라디오 버튼이 있어도

한 번에 하나의 버튼만 눌리게 되는 것이다.

즉 라디오 버튼은 네임이 같은 것들끼리 그룹핑이되고 그룹안에서 하나의 버튼만 활성화 되는 버튼이다.

이와 반대로 그룹내에서 여러개의 버튼을 누를 수 있는게 바로 체크박스.


그룹내에서 다중 선택 가능.

위의 두 버튼에 대하여 페이지가 열렸을 때 기본적으로 체크가 되게 하고 싶다면

checked

를 추가하면 된다.

hidden

데이터 전송.
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/hidden.php">
            <input type="text" name="id">
            <input type="hidden" name="hide" value="egoing">
            <input type="submit">
        </form>
    </body>
</html>

히든 타입은 화면상에 표시되지 않음.
그러나 값을 제출시, 전송된 주소로 히든값이 전달된다.

label

버튼의 타입 앞에, 아이디,비밀번호 이런식으로 텍스트 이름을 바로 쓰는 게 아니라 레이블이란 방식을 써서 좀더 세련되게 하자.

아이디 이런식으로 이게 문자라는 점을 강조하기 위해 레이블 태그로 감싸자.

이를 텍스트-- 버튼간의 관계를 조금 더 긴밀히 표현하고 싶다면

텍스트--- text:
버튼 ----

이렇게 레이블이 지칭하는 바를 명시해주도록하자.

그러면 텍스트를 클릭하면 버튼 안(텍스트 필드)으로 커서가 움직이게 된다.

get방식과 post의 차이, 그리고 method

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/method.php" method="post">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>

데이터를 보낼때 웹브라우저는 url뒤에다가 ?id= 입력값으로 데이터를 전송한다.
이렇게 되면 입력 비번이 url에 노출되므로 보안에 문제가 생긴다. 따라서 감춰서 데이터를 전송할 필요가 있는데 이때 쓰는 것이 post 방식이다.

    <form action="http://localhost/method.php" method="post">

메소드를 지정하지 않으면 기본적으로 get방식으로 나간다.
get 방식은 위의 것처럼 데이터가 노출되는 방식.
반대로 post 방식의 경우 데이터를 숨겨서 전송하므로 url에 비번의 데이터가 없다.

파일 업로드

<html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
      <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
          <input type="file" name="profile">
          <input type="submit">
      </form>
  </body>
</html>

인풋 타입 파일을 하면.

컴퓨터에서 파일을 선택할 수 있는 창이 나온다.

  • form
profile
왕초보

0개의 댓글