개요

HTML과 CSS로 ToDo 목록을 만들었습니다.
JS에서 움직임을 붙이기 전의 정적인 사이트입니다.



① 작업 입력란
② 태스크의 우선도를 라디오 버튼으로 만들었습니다.
③input에서 입력된 값이 테이블 태그에 추가됩니다.
④ 완료된 태스크는 체크박스를 클릭하여 삭제됩니다.

HTML(입력란)

ToDo 입력란입니다.

index.js

<section1>
  <div class="form">
    <label for="todo" class="todos">ToDo</label>
    <input type="text" placeholder="タスクを入力してね" id="todo">
      <input type="radio" name="todo" value="high" class="radio1">
      <label>高</label>
      <input type="radio" name="todo" value="medium" class="radio2">
       <label>中</label>
       <input type="radio" name="todo" value="low" class="radio3">
       <label>低</label>
    <button class="submit">DO</button>
  </div>
</section1>

1, 라디오 버튼
input 요소의 type 속성에 radio를 추가하면 라디오 버튼이 됩니다. 라디오 버튼은 여러 선택 항목 중 하나만 선택할 수 있는 형식의 버튼입니다. 공통 항목에 사용하는 라디오 버튼에는 모두 같은 이름을 지정해야 합니다.
또한 데이터가 전송될 때 어떤 항목이 선택되었는지를 판별하기 위해 value 속성에 개별 값을 지정합니다.
이번 name은 todo, value는 우선도의 높이 heigh, medium, low로 했습니다.

HTML(테이블)

다음에 데이터 추가 후의 데이터가 반영되는, 테이블입니다.

index.html

<section2>
  <table>
    <caption>リスト</caption>
    <tr>
      <th class="col-1">日付け</th><th class="col-2">ToDo</th><th class="col-3">重要度</th><th class="col-4">完了</th>
     </tr>
     <tr>
       <td>5/5</td><td>ご飯を食べる</td><td>高い</td><td><input type="checkbox" name="do" value="Done"></td>
      </tr>
   </table>
</section2>

1,tr 태그
테이블 태그의 행에 해당합니다.

2,th
table header의 약자입니다.
이 목록의 제목에 해당합니다. 또한 각 제목의 너비를 설정하기 위해 클래스 속성을 부여했습니다.

CSS에서는 다음과 같이 설정했습니다.

style.css

.col-1 {
  width: 10%x;
}

.col-2{
  width: 60%;
}

.col-3 {
  width: 10%;
}

.col-4{
  width: 10%;
}

3,td
테이블 태그의 데이터입니다.
ToDo 양식에 입력된 데이터가 반영됩니다.

4, 체크 박스
input 속성에 checkbox를 지정하면 체크 박스가됩니다. 체크 박스는, 복수의 선택 항목 중에서 개수를 한정하지 않고 선택할 수 있도록 하는 경우에 사용합니다.
name,value 속성은 라디오 버튼과 유사합니다.