💧HTML:Form and Table

hojune·2023년 8월 13일

Web Development

목록 보기

4/33

Tables

<table>

<td> table data cell or table data

<tr> table row

<th> table head
  
  
<thead>

<tbody>

<tfoot>

위 3가지는 코드 속 접근성, 가독성
  
  
rowspan

colspan

헤더를 2행으로 만들 때 사용할 수 있음

Table 사용 예시


<body>

    <table>

        <thead>

            <tr>

                <th rowspan="2">Subscription</th>

                <th colspan="2">Price</th>

                <th rowspan="2">Support</th>

            </tr>

            <tr>

                <th>member</th>

                <th>non member</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Free</td>

                <td>Free</td>

                <td>Free</td>

                <td>N/A</td>

            </tr>

            <tr>

                <td>Personal</td>

                <td>$4.99</td>

                <td>$9.99</td>

                <td>Weekdays</td>

            </tr>

            <tr>

                <td>Business</td>

                <td>$29.99</td>

                <td>$49.99</td>

                <td>24/7</td>

            </tr>

        </tbody>

    </table>

</body>

아래 결과물

부가설명

<th>에서 price를 두개로 분류하고 싶어서 rowspan을 사용해 나머지 두 항목인 sub와 sup을 
2행 크기만큼 차지하게 만든뒤에 colspan을 사용해 price에는 2개 열 만큼의 크기가 들어갈 
수 있게끔 한 것이다.

Forms

<input> 일반적인 입력 형식 (닫는 태그가 없음)

<input ~~~~~~~>

Type - text, password, color, time, etc..


Placeholder = 입력란의 임시 텍스트를 지정하는 속성


<form action="/tacos">

    <input type="text" placeholder="User Name">

    <input type="password" placeholder="PassWord">

    <input type="color">

    <input type="time">

</form>



<label> 

   <p>

       <label for="username">Enter a Username:</label>

       <input id="username" type="text" placeholder="User Name">

   </p>

   <p>

        <label for="password">Enter a Password:</label>

        <input id="password" type="password" placeholder="PassWord">

   </p>

   <p>

         <label for="color">choise a color</label>

         <input id="color" type="color">

   </p>


<label> 안에 있는 for = "A"와 <input>안에 있는 id = "A"를 A처럼 
        같은 text로 써주면 연결 시켜줄 수 있음


   <label>

        Enter a Number:

       <input type="Number" placeholder="enter a number">

   </label>

       이렇게 사용해도 연결시킬 수 있다.


  
<button> js와 함께 많이 쓰임


폼안에 있는 버튼과 폼밖에 있는 버튼은 작동에서의 차이가 있다.

폼안에서라도 type을 button으로 지정한다면 제출의 기능이 아니라 
  
단순한 버튼으로서 기능할 수 있다.

+) button은 label을 연결하지 않는다 충돌이 생길 수 있다  



name 속성

input안에서 쓰이며 데이터를 전송할 때 이용할 부분은 
  
해당이름으로 레이블링 되어있음 (중요!)

서버로 데이터를 전송할때 사용



<label for="username">Enter a Username:</label>

<input id="username" type="text" placeholder="User Name" name="username">



<form>활용



<form action="https://www.youtube.com/results">
  
   <input type="text" name="search_query">

   <button>Search Youtube</button>

</form>


버튼을 만들어서 action에 있는 주소에 따라 유튜브 검색을 하게 됨

Important Input Types


input type - checkbox


<form action="/birds">

      <input type="checkbox" name="agree_tos" id="agree">

      <label for="agree">i agree to everything</label>

      <button>Submit</button>
  
 </form>



 input type - radio
  

 <label for="xs">xs:</label>

 <input type="radio" name="size" id="xs" value="xsmall">
  

 <label for="s">s:</label>

 <input type="radio" name="size" id="s" value="small">
  

 <label for="m">m:</label>

 <input type="radio" name="size" id="m" value="medium">



value 값이 서버에 넘겨주는 값이 되는 것
  

 

Checkbox and Radio Difference?

전자는 체크박스가 2개라고 가정했을 때 2개 모두 선택하거나 하지 않거나 상관없음

후자는 체크박스가 3개라고 가정했을 때 3개 중 단 한개만 선택 되어야 함



name값이 size로 통일되어 있는데 이렇게 해야 각각의 것들이 하나로 연결이 됨




<select> 과 하위 목록인 <option>

  
<label for="meal">please select an entree</label>

<select name="meal" id="meal">

       <option value="">--please select--</option>

       <option value="fish">Fish</option>

       <option value="veg" selected>Veg</option>

       <option value="steak">Steak</option>

</select>



첫번째 옵션처럼 value를 비워놓고 text만 넣을 수도 있다.
  

또한 selected처럼 맨위의 값이 아닌 다른 값을 자동으로 선택되도록 할 수 있다.

  
  

input type - range


<label for="range">amount of cheese</label>

<input type="range" id="range" min="1" max="99" step=4"name="cheese level">


min max 값과 step은 한칸당 얼마씩 오르내릴지 정할 수 있다.



<textarea>


  <label for="request">any request</label>

  <br>

  <textarea name="request_server" id="request" cols="30" rows="10" 
  placeholder="something"></textarea>

Input 요소에 Label을 연결하는 이유?

여러 장점이 있다

레이블 텍스트는 시각적으로만 컨트롤에 연결된 것이 아니라, 프로그램 상에서도 연결된다
이 말은 보조 기술 역시 어떤 컨트롤의 설명이 정확히 무엇인지 알 수 있다는 것이므로, 
사용자가 양식 입력 칸에 포커스를 한 경우, 스크린 리더가 그 칸에 대한 올바른 설명을 
읽어줄 수 있어서 사용자가 어떤 데이터를 입력해야 하는지 이해하기가 쉬워진다

레이블을 클릭하거나 터치하는 경우, 브라우저는 레이블이 연결된 요소로 포커스를 전달한다

+) <label>을 <input>과 연결하려면 우선 <input>에 id 특성을 지정해야 한다
   <label>에는 for 특성에 그 id와 동일한 값을 지정한다
   또는, <input>을 <label>의 안에 배치하는 방법도 있다 
   이 때는 암시적으로 서로의 관계를 생성하므로 id와 for 특성을 지정할 필요는 없다

HTML5 폼 유효성 검사


Html attribute - input - required


<label for="first">Enter First Name</label>

<input type="text" name="first" id="first" required>


  <p>

    <label for="username">Username</label>

    <input type="text" name="username" id="username" 
           minlength="5" maxlength="20" required>

  </p>



required = 입력값이 없으면 제출이 안됨 


minlength, maxlength = 위의 range의 min과 max와 구별되게 알아 둘 것

마찬가지로 충족하지 못할 시 제출이 안됨

hojune

이전 포스트

🌈HTML:Semantics

다음 포스트

💧HTML:Form and Table

Web Development

Tables

Forms

Important Input Types

Input 요소에 Label을 연결하는 이유?

HTML5 폼 유효성 검사

🌈HTML:Semantics

🌈CSS:Basic Element

0개의 댓글