HTMLで入力フォームを1行にするにはどうすればいいですか？

HTMLで入力フォームを1行にするための基本的な方法について解説します。具体的には、<input>要素を使用して1行のテキスト入力欄を作成する方法について説明します。

<input>要素の使用

<input>要素に type="text" を指定すると、1行のテキスト入力欄を作成できます。以下に具体的なコード例を示します。

<input type="text">

このコードをHTMLファイルに追加することで、1行のテキスト入力欄が表示されます。

属性の追加

<input>要素には、多くの属性を追加してカスタマイズすることができます。例えば、placeholder属性を使用して入力欄にヒントを表示することができます。

<input type="text" placeholder="ここにテキストを入力">

これにより、入力欄には「ここにテキストを入力」というヒントが表示されるようになります。

フォーム内での使用

<form>要素内に複数の入力欄を配置することができます。これを使って、例えば名前とメールアドレスを一行で入力するフォームを作成する方法を示します。

<form>
    <input type="text" placeholder="名前">
    <input type="email" placeholder="メールアドレス">
    <input type="submit" value="送信">
</form>

このフォームは3つの入力欄がありますが、全て1行に表示されます。

CSSを使ったカスタマイズ

CSSを使用すると、入力欄の見た目をさらにカスタマイズできます。以下の例では、入力欄の幅を指定し、余白を設けています。

<style>
    form input {
        margin-right: 5px;
        width: 200px;
    }
</style>

<form>
    <input type="text" placeholder="名前">
    <input type="email" placeholder="メールアドレス">
    <input type="submit" value="送信">
</form>

これにより、入力欄間に5pxの余白ができ、各入力欄の幅は200pxになります。

まとめ

HTMLで入力フォームを1行にする方法について、基本的な例とカスタマイズの例を説明しました。<input>要素に type="text" を指定することで、簡単に1行の入力欄を作成できます。また、CSSを使用して外見を調整することも可能です。

その他の参考記事:html 入力フォーム