入力欄＋連結ボタン

解説

テキスト入力欄の右端にボタンをぴたりと連結した、横一列のフォーム部品です。外側のラッパーに display:flex を当て、入力欄に flex:1 を与えて幅を可変に、ボタンは固定幅にしています。角は外枠の overflow:hidden と border-radius で一体の丸みを作り、入力欄の右枠線を消すことで継ぎ目を消しています。検索や URL 貼り付けなど「入力してすぐ実行」する操作にぴったりです。

よく使う場面

• サイト内検索ボックスと検索ボタン
• クーポンコードやメール登録の入力＋送信
• 共有 URL を貼って読み込むツールの入力欄

入力欄にフォーカスすると枠線の色が変わり、入力中であることが分かります。ボタンの色は background を変えるだけでブランドカラーに合わせられます。狭い画面では横幅が足りなくなりやすいので、width の上限を見直すか、必要なら縦並びに切り替える設計を用意しておくと崩れません。入力欄には用途が伝わる placeholder とラベルを添えると、操作の迷いが減ります。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録