初心者でも安心！HTML フォームの入力フィールドにデフォルト値を設定する方法

2024-04-02

HTML フォームで入力フィールドのデフォルト値を設定する方法

value 属性

input 要素の value 属性にデフォルト値を指定することで、フォームが読み込まれたときにその値がフィールドに表示されます。

例：

<input type="text" name="name" value="山田 太郎">

上記のコードは、名前フィールドに "山田太郎" というデフォルト値を設定します。

JavaScript を使用して、入力フィールドのデフォルト値を設定することもできます。

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

<script>
document.getElementById("name").defaultValue = "山田 太郎";
</script>

上記の 2 つの方法に加えて、以下のような方法でデフォルト値を設定することもできます。

placeholder 属性

placeholder 属性は、入力フィールドにヒントを表示するために使用されます。デフォルト値として使用することはできませんが、ユーザーに初期値を提示するのに役立ちます。

<input type="text" name="name" placeholder="山田 太郎">

サーバサイドの処理

サーバサイドの処理でデフォルト値を設定することもできます。

<?php
$name = "山田 太郎";
?>

<input type="text" name="name" value="<?php echo $name; ?>">

上記のコードは、PHP を使用して name 変数に "山田太郎" という値を設定し、その値を入力フィールドのデフォルト値として設定しています。

シンプルなフォームの場合は、value 属性を使用するのが最も簡単です。
JavaScript を使用して複雑なフォームを作成する場合は、JavaScript を使用してデフォルト値を設定することができます。
サーバサイドでデフォルト値を動的に生成する必要がある場合は、サーバサイドの処理を使用する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト値の設定</title>
</head>
<body>
    <form action="#">
        <input type="text" name="name" value="山田 太郎">
        <input type="submit" value="送信">
    </form>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト値の設定</title>
</head>
<body>
    <form action="#">
        <input type="text" id="name">
        <input type="submit" value="送信">
    </form>

    <script>
        document.getElementById("name").defaultValue = "山田 太郎";
    </script>
</body>
</html>

<?php
$name = "山田 太郎";
?>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト値の設定</title>
</head>
<body>
    <form action="#">
        <input type="text" name="name" value="<?php echo $name; ?>">
        <input type="submit" value="送信">
    </form>
</body>
</html>

HTML フォームで入力フィールドのデフォルト値を設定する他の方法

datalist 要素は、入力候補のリストを提供することができます。ユーザーはリストから候補を選択することで、入力の手間を省くことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト値の設定</title>
</head>
<body>
    <form action="#">
        <input list="names" name="name">
        <datalist id="names">
            <option value="山田 太郎">
            <option value="佐藤 花子">
            <option value="田中 健太">
        </datalist>
        <input type="submit" value="送信">
    </form>
</body>
</html>

上記のコードは、name フィールドに候補リストを提供します。ユーザーはリストから "山田太郎"、"佐藤花子"、"田中健太" のいずれかを選択することができます。

CSS の ::placeholder 疑似クラスを使用することで、入力フィールドのプレースホルダーにデフォルト値を表示することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト値の設定</title>
    <style>
        input::placeholder {
            color: #ccc;
        }
    </style>
</head>
<body>
    <form action="#">
        <input type="text" name="name" placeholder="山田 太郎">
        <input type="submit" value="送信">
    </form>
</body>
</html>

上記のコードは、name フィールドのプレースホルダーに "山田太郎" という文字列を灰色で表示します。

jQuery ライブラリを使用することで、より簡単にデフォルト値を設定することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト値の設定</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form action="#">
        <input type="text" name="name">
        <input type="submit" value="送信">
    </form>

    <script>
        $(function() {
            $("input[name='name']").val("山田 太郎");
        });
    </script>
</body>
</html>