Written by 최태열
on 

HTML3

HTML 기본 2

HTML 문법


테이블

<table>
<tr>
<th>참치</th>
<th>고래</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
</tr>
</table>
참치 고래
상어 문어 
1. <tr>태그는 테이블에서 행을 구분
2. <th>각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬
3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나눔

& <td colspan="2"> : 2열 합침
& <td rowspan="2"> : 2행 합침 
& <caption> :  테이블 상단에 짧은 설명


HTML 공간 분할

<p></p>, <div></div>, <h></h>, <ul></ul>, <ol></ol>, <form></form>



Form 요소

사용자로부터 입력을 받을 수 있다.

사용자가 입력한 데이터를 서버로 보낼 때에도 사용한다.

<form action="처리할페이지주소" method="get|post"></form>

get 일 경우 주소에 데이터를 추가하여 전달하는 방식

post일 경우 별도로 첨부하여 전달하는 방식


input 요소

from 요소 안에서 사용

<input type="타입명" name="이름">
  1. 텍스트 입력(text)

  2. 비밀번호 입력(password) 입력 시 *로 바꿔줌

  3. 라디오 버튼(radio) 
     <input type="radio" name="이름", value="보여지는 텍스트">

    같은 name 중에서 한 개 만 선택 가능

  4. 체크박스(checkbox)

    같은 name중에서 여러 개 선택 가능

  5. 파일 선택(file) 
     <input type="file" name="upload_file" accept="image/*">

    해당 위치에 파일 전송 받을 수 있음


  1. 선택 입력(select)

     <select name="fruit">
 	<option value="apple"> 사과
 	<option value="orange" selected> 귤
 	<option value="strawberry"> 딸기	
 	<option value="peach"> 복숭아
 </select>
 -- 드롭다운 리스트에서 한개만 선택 가능

  2. 문장 입력(textarea)

     <textarea name="message" rows="5" cols="30"></textarea>


  1. 버튼 입력(button) 
     <button type="button" onclick="alert('버튼을 클릭하셨군요!')"></button>


  1. 전송 버튼(submit)

     어릴 때 자신의 별명을 적어주세요 : <br>
 <input type="text" name="nickname" value="별명"><br><br>
 <input type="submit" value="전송">

    어릴 때 자신의 별명을 적어주세요 :
    <input type=”text” name=”nickname” value=”별명”>

    <input type=”submit” value=”전송”>


  1. 필드셋(fieldset) 
    <fieldset>
<legend>입력 양식</legend>
이름 : <br>
<input type="text" name="username"><br>
이메일 : <br>
<input type="text" name="email"><br><br>
<input type="submit" value="전송">
</fieldset>
    입력 양식 이름 :
    <input type="text" name="username">
    이메일 :
    <input type="text" name="email">

    <input type="submit" value="전송">


input 요소의 속성

value : 초기값

readonly : 볼 수 있지만 수정은 불가능 → 전송을 누르면 초깃 값이 서버로 전송됨

disabled : 입력 필드를 아예 볼 수 없게 함

maxlength : 입력할 수 있는 문자열 최대 길이

size : 한번에 보여줄 수 있는 문자의 최대 개수

Discussion and feedback