React Hook Form v7 + MUI v5 + zod v3を使ったコンポーネント実装例 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに TextField RadioGroup SelectForm CheckboxGroup DatePicker コンポーネント使用側実装例 おわりに 本記事を執筆するにあたって、 マナリンク Tech Blog運営さんのReact Hook Form(v7)を使ったコンポーネント設計案 piyokoさんのMUI v5 + React Hook Form v7 で、よく使うコンポーネント達を連携してみる という記事を参考にさせていただきました。いつも非常にわかりやすい記事をありがとうございます。 はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 React Hook Form v7 + MUI v5 + zod v3を使ったよく使うコンポーネントの実装例を調査しており、こちらの記事を参考に実装を進めてみました。しかしRadioGroupやDatePickerをatom
Google Forms APIが正式リリース。Googleフォームの作成や編集、集計などをプログラミングで制御可能に
Google Forms APIが正式リリース。Googleフォームの作成や編集、集計などをプログラミングで制御可能に アンケートやクイズなどを簡単に制作できるGoogleフォームをAPI経由で作成、編集できる「Google Forms API」が正式版となったことを、Googleが発表しました。 Introducing the new Google Forms API! Developers can now build powerful integrations on top of Forms. Here's how you can use the new Forms API and what’s in it → https://t.co/zLcaEw2ru1 What will you build for Google Workspace? pic.twitter.com/oSkPqx
最新版【仕様変更対応済み】Googleフォームを好きなようにカスタマイズする方法 | 名古屋のホームページ制作会社・ゴリラウェブ
ビビらない。 普段ソースをいじくり倒している私でもこれを見ると”ウッ”となりますが、冷静を保ちます。 文字列検索で必要情報を探し出す ソースが表示されたら「Ctrl」と「F」を押して文字列検索をします。探し出す文字列は2種類。 ① <form action Ctrl+Fで「 <form action」と入力 すると、この文字列のなかから「 <form action」を見つけ出してくれます。 この<form actionから始まる文字列（アンダーラインの部分）をコピーしてメモ帳などにペーストしておく こんな感じ しっかり最後の > まで取ること。 実際は、 が必要な部分で、ご自分の作られた<form>にこれをきちんと入れられればそれでOKです。 ちょっと怪しかったら<form>を丸ごと入れ替えちゃった方が安心です。 ↓ここからが以前と変わった部分です↓ ②各フォームのnameを見つける 同じ
vue.jsでマルチステップの入力フォーム作成(基礎編) | アールエフェクト
入力フォームには1つのページで完了するシンプルなものから複数のページを介して完了するものまでいろいろな形があります。本文書ではvue.jsを使ってマルチステップフォームを作成するための手順を説明しています。 各ステップにバリデーションが入っていないため実用的ではありませんが、マルチステップフォームを作る上での基本的は考え方とコンポーネントの理解を深めることができます。 作成するマルチステップフォームの概要 作成するフォームは4つのステップに別れ、1つのステップに1つのコンポーネントが対応します。最後のステップは確認画面のため入力フォームがあるのは3つのステップです。 1つ目のステップの入力フォームでは名前(firstName, lastName)を入力、2つ目のステップの入力フォームではEmail、電話番号を入力、3つ目は誕生日を入力するシンプルなものです。4つ目は確認画面なので1〜3で入
Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar
サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。 ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコンポーネントが揃っています。
HTML5のフォームバリデーションを使い倒す - Qiita
HTML5になってフォームバリデーションも強化されていますが、さらにJavaScriptやCSSなどから使うこともできます。 ご注意 ブラウザサイドのバリデーションは「ブラウザごとに対応・非対応がありうる」ということや「ユーザーレベルで書き換えが可能」ということもあるので、あくまで「サーバ送信せずにエラーをユーザーに伝えられる」、入力補助の機能と考えてください。サーバサイドのバリデーションに代わるものではありません。 HTMLサイド 制約のかかる<input type> HTML5では指定できる<input>のtypeも増えましたが、ものによっては指定できる値が決まっている（さらには、専用の入力フォームが用意される）ものがあります。 color…#abcdef形式での色指定 date…日付 datetime-local…日時 email…メールアドレス month…年月 number…数値
GoogleAppsScript(GAS)で入力フォームを作る - Qiita
概要 Google Apps Scriptsのウェブアプリケーション スプレッドシートの参照、更新、メール送信ができるため、現場でちょっとしたツールを作るのに向いてる gasでウェブアプリケーションとして導入するまでの手順は省略 使いまわせるような雛形を作っておき、後でコピペで作れるようにしておくことを目的としてます リンク 公式ガイド：https://developers.google.com/apps-script/guides/web gasサンプル集：https://github.com/google/google-apps-script-samples サンプルプログラムの内容 入力フォームの内容をスプレッドシートに追記する 入力フォームのセレクトボックス(動的)は、マスタデータを記載しているスプレッドシートから動的に生成する 使用ライブラリ jquery(あまり使いたくないけど
【短いコードで色々出来る】Google Apps Scriptでスプレッドシートと連携した無料Ajaxフォームの作り方※サンプル付き【自動返信メールもあるよ】 - Qiita
【短いコードで色々出来る】Google Apps Scriptでスプレッドシートと連携した無料Ajaxフォームの作り方※サンプル付き【自動返信メールもあるよ】JavaScriptCoffeeScriptSassGoogleAppsScriptslim 前置き 皆さんはGoogle Apps Script(以下GAS)を使った事がありますか？ GoogleドライブやGmail等、Googleが提供するサービスをJavascriptベースのGASと言うスクリプトで扱う事が出来る物なのですが、中々使い易く、機能も豊富なので短いコードでかなり便利な物を作る事が出来ます！ (｀･ω･´)b 今回は仕事で作った物を少しコンパクトにして、備忘録的な感じで紹介してみたいと思います。 まず初めにサンプルを紹介しますねー。 Googleドライブ関連： 【GAS】 スプレッドシートと連携したAjaxフォーム -
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
フォームインプットメーカー - フォーム入力を自動化するブックマークレット MOONGIFT
Web開発時においてフォーム入力ほど面倒なものはありません。入力しては送信し、ちょっと変更してはまた入力し…とエンドレスに入力が求められます。こんな作業こそ自動化したいポイントじゃないかと思います。 ということでフォームインプットメーカー（FIM）を使ってみましょう。予め入力内容を定義することで値を一気に入力するブックマークレットができあがります。 フォームインプットメーカーの使い方 フォームインプットメーカーの画面です。こんな感じでnameと値を定義していきます。 作り終わったら作成ボタンを押すと、専用のブックマークレット（緑色のボタン）が生成されます。これを実行するとフォームに自動入力されます。 フォームインプットメーカーを使えばデータの入力がぐっと楽になりそうです。以前の入力内容は保存されていますので、再編集も簡単にできるようになっています。 フォームインプットメーカーはHTML5/
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
入力フォームの工夫 - ワザノバ | wazanova
http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20 guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホ
ユビキャスト、SNSアカウントを利用したフォーム入力サポート無料ASPを提供 面倒な住所・氏名・メアドなどクリックだけで自動入力可能に
ユビキャスト、SNSアカウントを利用したフォーム入力サポート無料ASPを提供 面倒な住所・氏名・メアドなどクリックだけで自動入力可能に ～ユーザーの途中離脱を防いでコンバージョン率UP～ インターネットシステム開発を行う株式会社ユビキャスト(所在地：東京都港区、代表取締役：呉 英仁)は、クリックするだけで登録フォームに住所・氏名・メールアドレスなどの自動入力を実現する、利用料無料のASPサービス「Gyro-n SFS」(ジャイロンSFS)を2014年5月27日にリリースいたしました。 Gyro-n SFS(ジャイロンSFS) Gyro-n SFSは、クリックするだけでSNSのプロフィール情報をフォームに自動入力できる「プロフィール入力サポート機能」と、候補からクリックしていくだけで住所・郵便番号を一発でフォームに自動入力できる「住所入力サポート機能」を備えております。ユーザーの入力作業を簡
ファイルアップロード用のフォームのまとめ
ファイルをアップロードするフォームのHTMLついてまとめてみました。 ファイルアップロード用のフォーム このエントリーはHTMLのビギナーの方向けの内容です。 １．HTML まずフォームをアップロードするためのHTMLから説明します。 <form action="./upload.cgi" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="アップロード" /> </form> ファイルをアップロードする場合、form要素のmethod属性は「post」です。 またenctype属性の設定が必要です。enctype属性の値には「multipart/form-data」を指定します。 <form action="./upload.c
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
【jQuery】フォームから様々な値を取得する方法まとめ | tagamidaiki.com
jQueryはとても便利なプラグインです。 JavaScriptの普及を助けたといっても過言ではありません。 jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。 今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。 テキスト よく使われる1行のテキストボックスです。 これはとても簡単でform要素に .val() で値を取得することが出来ます。 HTML <form id="test-form"> <input type="text" name="test-form" value="56"> </form> JavaScript var formValue = $('#test-form [name=test-form]').val(); var val = Number(formValue) || 0; // N
やってられるか！！蹴りたいフォームの１２要素 | WP-E (仮)
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
テキストフィールドがEnterキーでサブミットされるのを防ぐ - Qiita
※コメントの指摘を修正済みです。 HTMLではForm内にテキスト一行入力系のフィールドが一つだった場合、そこでEnterキーを押すとSubmitされる仕様になっている。 詳しい仕様に関しては以下を参照： HTML5の仕様: http://www.w3.org/TR/html5/forms.html#implicit-submission 古くからの仕様: http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 具体的には、inputのtypeが text, search, url, tel, email, password, datetime, date, month, week, time, datetime-local, number のどれかだと、この挙動になる。 これが厄介なのは、Form内にチェックボックスやテキスト
正しいメールアドレスを入力させるのは至難｜Web制作 W3G
Updated 2013.11.08 / Published 2013.11.08 日本の企業は問い合わせフォームでユーザから様々な情報を取得したがる傾向が強く、結果、問い合わせフォームの入力項目も多くなりがちです。そこには必須の入力欄も設けられたりするわけですが、肝心のところ、ほんとうに正しい情報が入力されているかどうかは定かではありません。 正しいメールアドレスの取得が生命線になる とくに問い合わせフォームで生命線となるのが正しいメールアドレスを入力してもらうことです。なぜなら問い合わせが獲得できたとしても、その際に取得できた連絡可能な手段がメールアドレスしかない場合、そのメールアドレスが間違っていれば、せっかく獲得した問い合わせに対して応えることができません。 そのためメールアドレスの取得に慎重になる企業は多く、2重のメールアドレスの入力を強いたり、「間違いのないように注意して入力し
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
