タグ フォーム
人気順 10 users 50 users 100 users 500 users 1000 users2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があり... 続きを読む
「就業中の眠気問題」、アンケート結果発表!
「就業中に眠くなると、トイレで寝てる人もいる」。一度も会社員経験のない自営業の私は、長年会社勤めだった妻からそんな話を聞いて衝撃を受けた。 そこで先月、DPZライター陣に就業中の眠気について色々と話を伺い、記事にした。記事の最後に「読者の皆様の体験談もお寄せください」とフォームを設けたら、本当に沢山... 続きを読む
ついにChromeで使えるようになったCSSの便利機能! light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む
「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース
「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース 静的サイトジェネレータAstro用のデータベースサービス「Astro DB」が登場しました。 簡単にAstroに組み込むことが可能で、Astroのバックエンドデータベースとして、例えばフォームやコメントのデータの入出力、ユーザ... 続きを読む
バーガーキングが入れそうな空き物件を見つけて、実際に入居できたら報奨金10万円という天才キャンペーンやってる
あらいちゅー🐴🏠🔮 @araichuu バーガーキングが入れそうな空き物件を見つけてフォームで送信、実際に入居契約できたら報奨金10万円という前代未聞のキャンペーンwwwwww app.burgerking.co.jp/bkad/createyou… 2024-01-28 17:30:21 バーガーキング・ジャパン @BURGERKINGJAPAN バーガーキング・ジャパンの公式アカウント... 続きを読む
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 ... 続きを読む
役所の市民の声みたいなページが面白い
最近のマイブーム 適当な知らない役所のホームページで、市民の声的な自由に意見を出せるフォームの過去の意見と回答のページを見ること 真面目な意見と回答のやり取りもあるのだが、態度が悪いと文句言いたいだけとか、長文持論展開(支離滅裂)とか、勝手な想像で適当なこと書いてる(回答でやんわり論破される)とか... 続きを読む
JavaScript なしで動作するモダンなコードの書き方
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HT... 続きを読む
地味だけど嬉しい新機能! フォームのセレクトボックスで区切り線にhrを使用できるようになりました
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポ... 続きを読む
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する 2023.10.31 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を... 続きを読む
ビッグモーターに不正アクセス、個人情報漏えいか フォームからの問い合わせ、約7年分
ビッグモーターは30日、自社Webサイトが第三者による不正アクセスを受け、「お問い合わせフォーム」から同社に連絡していた人達の個人情報の一部が漏えいした可能性があると発表した。 中古車販売などを手がけるビッグモーター(東京都多摩市)は10月30日、自社Webサイトが第三者による不正アクセスを受け、「お問い合わ... 続きを読む
そういうとこやぞ? EdgeでChromeをダウンロードすると理由を尋ねるフォームが出現【やじうまWatch】
行動変容 自分と世界を変える技術 / Behavior change techniques
<Ver.1.0> 社会の変化や、サステナビリティの観点で注目されている「行動変容」についてまとめています。 <シェア・共有歓迎です> ■解説&ディスカッション会 こちらの資料をベースに、簡単な解説&皆さんとのディスカッションをしました。 10/18(水) 上のイベントはすでに終了しましたが、今後も様々な形で機会を作... 続きを読む
CSSの新しいプロパティ「form-sizing: content;」が便利! フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-h... 続きを読む
YAPC::Hiroshima 2024のスピーカーを募集します - YAPC::Japan 運営ブログ
みなさんこんにちは。YAPC::Hiroshima 2024実行委員会の id:tkzwtks です。 先日開催を告知いたしましたYAPC::Hiroshima 2024ですが、本日より早速スピーカーの募集を行います! fortee.jp 上記のフォームよりご応募ください。なお、応募締め切りは 2023年10月16日(月) 18:59 (JST) です!(締め切りから一週間を目安に... 続きを読む
1Password のオートコンプリート機能をサービス提供側で無効化する
Leaner Technologies の @corocn です。 最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。 画像はshadcn/ui - dialogから拝借 結論 input に data-1p-ignore 属性を付与する autocomplete="off" しても空気読んで無効化して... 続きを読む
Meta、生成AIトレーニングからユーザーがデータ(の一部)を削除できるように
Metaは、プライバシーセンターに生成AIモデルのトレーニングデータに関する説明を追加した。また、「生成AIで使用されるサードパーティからの個人情報を削除」するためのフォームの提供を開始した。 上の画像の「Metaによる生成AIモデルの情報の利用について」を選択すると、「生成AIモデルに関連する、Metaによる情報の... 続きを読む
無料で商用可、ChatGPT(3.5)に匹敵する生成AI「Llama 2」 Metaが発表、Microsoftと優先連携
米Metaは7月18日(現地時間)、大規模言語モデル「Llama 2」を発表した。利用は無料で商用利用も可能としている。最大サイズの70億パラメーターモデルは「ChatGPT(の3月1日版)と互角」(同社)という。 ダウンロードには、Metaが用意するフォームから名前とメールアドレス、国、組織名を入れ、利用規約に同意した旨を... 続きを読む
コピペで簡単! CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで...記事の続きを読む 続きを読む
Threads人気ランキング
Threads人気ランキング いま話題になっているThreadsの人気ユーザーをランキング調査。 総フォロワー数,前日からのフォロワー増加数でランキングを掲載しています。 ユーザー登録申請 自分のアカウントがランキングに掲載されていなかった場合、以下のフォームから登録の申請ができます。 申請してから掲載されるまで、... 続きを読む
【Vue】reactive()って要らなくね?ref()だけでよくね? - Qiita
使用技術 Vue3 + Nuxt3 Composition API TypeScript ワイ、お問い合わせフォームを作りたい ワイ「Vue の Composition API を使って、お問い合わせフォームを作るで!」 ワイ「フォームのデザインはこんな感じや!」 ワイ「いや〜、我ながらイケてるデザインやな!」 ワイ「ほな、Composition APIを使ってフォームの状態... 続きを読む
Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます... 続きを読む
WordPressのフォームに入力された情報をもとに、backlogの課題を作成したい
こんにちは、GMOアドマーケティングのkayです。 フロントエンドエンジニアをしています。 表題にある開発について、ChatGPTと喧嘩しながらもなんとか実装したので備忘録として残しておきたいと思います。 やりたいこと WordPressで作ったサイトのフォームに入力された情報をもとに、backlogの課題を自動的に作成する。 ... 続きを読む
イラスト不正利用をAmazonへ申告する方法
イラストを不正利用されてグッズを作られてAmazonで販売された時、Amazonへ申告するとそのグッズを取り下げてもらえます。 知的財産権の侵害を申告するフォームを入力&送信しよう! 知的財産権の侵害を申告するページを開き記入します。 https://www.amazon.co.jp/report/infringement (↑上記はFire TV StickのASINで... 続きを読む
ほしいアプリを入力すると、ChatGPTが爆速で作るサービス「GPTApp」
ほしいWebアプリの説明を書くだけで、ChatGPTが作って即Web公開してくれるサービス「GPTApp」を、ゲームアプリの企画・開発を手掛けるミリオンダウト代表のTakayuki Fukudaさんが公開した。 アプリのイメージを考えてフォームにテキストで入力すると、ChatGPT(GPT-3.5)がコードを出力してWebに実装する。開発にかかる... 続きを読む