button要素

2024 5/24

2023.10.21 2024.05.24

記事の内容

概要

button要素は、formタグ内のデータを送信する場合に必要になる要素です。

記法

<form action=”送信先URL” method=”送信方式”>
　===========================
　input要素
　===========================
　<button type=”submit” name=”データネーム”>ボタンラベル名</button>
</form>

type属性

コマンド	説明
submit	データを飛ばす設定
reset	入力リセット
button	JavaScript組み合わせ動作

submit

submit属性は、formタグ内のaction属性で記述した送信先に、データを飛ばす設定になります。

submit属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>form要素に関して</title>
  </head>
  <body>
    <form action="遷移させたいURL" method="post">
      <label for="name">名前：</label>
      <input type="text" name="name" />
      <button type="submit">送信</button>
    </form>
  </body>
</html>

reset

reset属性は、inputタグ内に入力された文字などをリセットする設定になります。

reset属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./main.js"></script>
    <title>button要素(reset属性)に関して</title>
  </head>
  <body>
    <form>
      <label for="name">名前：</label>
      <input type="text" id="name" name="name" />
      <label for="age">年齢：</label>
      <input type="text" id="age" name="age" />
      <button type="reset">リセット</button>
    </form>
  </body>
</html>

出力結果

button

button属性は、JavaScriptと組み合わせて動作をするための設定になります。

disabled属性

disabled属性は、フォーム要素を無効化しユーザーが編集できないようにする属性です。

disabled属性

記法

【input】=======================
<input type=”text” disabled>

【button】======================
<button disabled>ボタン</button>

【select】 ======================
<select disabled>
　<option>選択肢1</option>
　<option>選択肢2</option>
</select>

【textarea】=====================
<textarea disabled></textarea>

【optgroup】 ====================
<optgroup label=”グループ” disabled>
　<option>選択肢1</option>
　<option>選択肢2</option>
</optgroup>

【fieldset】======================
<fieldset disabled>
　<legend>フィールドセット</legend>
　<input type=”text”>
</fieldset>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>disabled属性について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <form>
      <label for="username">ユーザー名:</label>
      <input
        type="text"
        id="username"
        name="username"
        class="form-input"
        disabled
      />

      <label for="email">メールアドレス:</label>
      <input type="email" id="email" name="email" class="form-input" />

      <button type="submit" class="submit-button" disabled>送信</button>
    </form>

    <button id="enable-button" class="action-button">入力を有効にする</button>
    <button id="disable-button" class="action-button">入力を無効にする</button>
    <p id="status-message" class="status-message">現在の状態: 無効</p>
    <script src="./main.js"></script>
  </body>
</html>

document.addEventListener('DOMContentLoaded', function() {
    const enableButton = document.getElementById('enable-button');
    const disableButton = document.getElementById('disable-button');
    const usernameInput = document.getElementById('username');
    const submitButton = document.querySelector('.submit-button');
    const statusMessage = document.getElementById('status-message');

    function updateStatusMessage() {
        if (usernameInput.disabled) {
            statusMessage.textContent = '現在の状態: 無効';
        } else {
            statusMessage.textContent = '現在の状態: 有効';
        }
    }

    enableButton.addEventListener('click', function() {
        usernameInput.removeAttribute('disabled');
        submitButton.removeAttribute('disabled');
        submitButton.style.cursor = 'pointer'; // ボタンのカーソルを変更
        updateStatusMessage();
    });

    disableButton.addEventListener('click', function() {
        usernameInput.setAttribute('disabled', 'disabled');
        submitButton.setAttribute('disabled', 'disabled');
        submitButton.style.cursor = 'not-allowed'; // ボタンのカーソルを変更
        updateStatusMessage();
    });

    updateStatusMessage(); // 初期状態を設定
});

.form-input {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: not-allowed; /* 無効化されたボタンのスタイル */
}
.submit-button:disabled {
    background-color: #6c757d;
}
.action-button {
    margin-top: 20px;
    margin-right: 10px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.status-message {
    margin-top: 20px;
    font-weight: bold;
}

出力結果

現在の状態: 無効