bubble

【bubble】フォーム作成に欠かせない!インプット(input)の使い方

こんにちは!ノーコーダーのIKDです。

今回は、bubble上でフォームを作るときに欠かせない、input の配置方法・編集方法などをお伝えしていきます。

bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

インプットの配置方法

まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。

インプットの配置方法は、画像のようにテキストをクリックし、右の空白にドラッグ&ドロップするだけです!

このように、枠が表示されていたら成功です!

インプットの編集方法

次は、インプットの編集方法を見ていきます。

  1. フォームの中の文字を変更できます。
  2. 自動的に、内容を変更できるようになります。(データベースが定義されているグループ内にinputがないと機能しない)
  3. 初めから入っているテキストを設定できます。
  4. コンテンツの種類を選択できます。(数値・パスワード・メアドなど)
  5. 入力ができる最大文字数を変更できます。
  6. 空のデータを無効化できます。
  7. input自体を機能させないようにできます。
  8. 今回、スタイルをデフォルトの状態で大丈夫です!

②が少し難しいのですが、初めのうちはなんかあるなぁと思う程度で大丈夫です。

インプットの動作確認

最後は、せっかくなのでインプットの動作を確認してみようと思います。

画像のように、インプットの下にテキストを配置してみましょう。

配置できたら、一番上の四角をに手順通りに設定してみてください。

このとき、自分で設定したinputのPlaceholder名が input ○○という風になります。

ここまでできたら、画面右上のpreviewを押して、インプットにテキストを入力してみましょう!

どうなるかは、ご自身で試してみてくださいね!何も動かないという方は、もう一度手順を確認するか、我々に連絡をください。

まとめ

今回は、よく使われるインプットについて解説してきました。

そんなに難しいところはなかったですよね?自分でアプリを作るときは、独自のスタイルを設定してあげるといい感じになります!

今回は以上です。また次回お会いしましょう〜

ABOUT ME
IKD
UI/UXで差をつけろ | ノーコード関連のライター | プログラミングはたしなむ程度

COMMENT

メールアドレスが公開されることはありません。