[html&css]표 만들기 (Table), 입력 양식 (Form)

day024·2024년 9월 18일

HTML&CSS&JS

목록 보기

2/15

1. 표

1.1 표의 기본

table 태그 - 표를 생성할 때 사용

<tr> <td>를 통해서 표를 만든다.

tr : 표에서 행을 생성
th : 표에서 제목을 나타내는 열을 생성
td : 표에서 일반적인 데이터를 나타내는 열을 생성

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    
    
    <tr>과 
        <td>이름</td>     <td>성별</td>   <td>주소</td>
    </tr>
    <tr>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
    </tr>
    <tr>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
    </tr>
</table>
</body>
</html>

이름	성별	주소
최진혁	남	청주
최유빈	여	청주

1.2 기본구조

thead, tfoot, tbody 그룹화 하여 가독성을 높여주고 웹 접근성을 향상시켜줌.
thead > tfoot > tbody 순
tfoot을 사용하면 어느 위치든 표의 아래 행으로

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td >청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>청주</td> <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>  <td></td>      <td></td> <td>1500</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

이름	성별	주소	회비
최진혁	남	청주	1000
최유빈	여	청주	500
합계			1500

1.3 병합

td rowspan="" 를 사용하여 병합을 한다.

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td rowspan="2">청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">합계</td>      <td>1500</td>
        </tr>
    </tfoot>
 
</table>
</body>
</html>

이름	성별	주소	회비
최진혁	남	청주	1000
최유빈	여	500
합계	1500

2. form

2.1 form 기본

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

form : 사용 측에서 입력을 입력하는 HTML 양식을 정의
action : submit한 정보를 보낼 곳 (값을 보낼 URL)

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<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>
</body>
</html>

아이디 :

비밀번호 :

주소 :

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <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>
</body>
</html>

text :

password :

textarea :

2.2 form 문자 입력 (text)

value: value 속성은 <input> 요소의 초깃값(value)을 명시
textarea: <textarea> 를 사용하면 여러줄을 입력 가능, cols과 rows를 통해서 구현

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <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>
</body>
</html>

text :

password :

textarea :

2.3 form 선택

1. dropdown list

select: select 통해서 option 묶어주는 콤보 박스생성
option : 태그 안에 선택사항 넣기, 선택 사항을 제공하는 드롭다운 리스트
value : option value = "~" 을 사용하면 눈에 보이는건 option값 그러나
실제로는 value값이 전송됨
multiple : 다중 선택 가능 (체크 박스가 더 좋은 방안)

<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>

붉은색 검은색 파란색 붉은색 검은색 파란색

2. input type

radio: 단일 선택
checkbox: 다중 선택

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/order.php">
            <p>
                <h1>색상(단일선택)</h1>
                붉은색 : <input type="radio" name="color" value="red">
                검은색 : <input type="radio" name="color" value="black" checked>
                파란색 : <input type="radio" name="color" value="blue">
            </p>
            <p>
                <h1>사이즈(다중선택)</h1>
                95 : <input type="checkbox" name="size" value="95">
                100 : <input type="checkbox" name="size" value="100" checked>
                105 : <input type="checkbox" name="size" value="105" checked>
            </p>
            <input type="submit">
        </form>
    </body>
</html>

붉은색 : 검은색 : 파란색 :

95 : 100 : 105 :

2.4 버튼

button: UI에 버튼 생성(자바 스크립트와 사용될 때 활용)
reset: 입력한 값을 초기화(재설정)

<html>
<head><meta charset="utf-8"></head>
<body>
    <form action="http://localhost/form.php">
        <input type="text">
        <input type="submit" value="전송">
        <input type="button" value="버튼" onclick="alert('hello world')">
        <input type="reset">
    </form>
</body>
</html>

2.5 form hidden

form hidden : UI가 필요없거나 서버로 전송하는 경우에 사용함

<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>

2.6 label

label 태그 - 상호작용 요소에 이름을 붙일때 사용

for 속성과 상호작용 요소 id 속성을 같은 값으로 설정
for 속성을 쓰지 않더라도 label로 상호작용 요소를 감싸면서 사용가능

<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>

2.7 method

method: 서버에 전송할 때 송신 방식 get(url을 통해 전송)이 기본값, 보안이 요구되면 post

<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>

2.8 파일 업로드

enctype: 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시
multipart/form-data 모든 문자를 인코딩하지 않음을 명시함. 이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함.

<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>