静的なToDoリスト

8091 ワード
HTML CSS プログラミング ToDoリスト HTML テキストリンク

概要

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の略です。
このリストの見出しに当たります。また,各見出しの幅を設定するためにclass属性を付与しました。

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属性はラジオボタン同様です。