Server Actionsにユーザ操作されたくないデータは渡さない

2024/02/27 6 users Server Actions Hidden input タグ

Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあっ... 続きを読む

input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog

2024/02/20 31 users Date Issue ライブラリ ミラティブ 意義

はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと... 続きを読む

想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ

2024/02/01 28 users CSS スイッチ ボリューム checkbox アプリ

WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単... 続きを読む

ブラウザのキーボードを制御する inputmode

2022/09/16 30 users Updated Created October input

October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやす... 続きを読む

Requesting <input type="switch"> · Issue #4180 · whatwg/html · GitHub

2018/11/20 28 users GitHub WHATWG Issue Switch HTML

This is a feature request on the behalf of all web developers targeting mobile. Here are reasons the toggle switch element should be natively available in HTML forms: Switch is a standard and popular UI control in both Android and iOS mobile platforms. Checkbox is used in websites due to the abse... 続きを読む

もう泣かない！input type=”file”のボタン部分をcssでデザインする方法

2018/07/24 45 users File CSS 解決策 ファイル ボタン

input type=”file” を使って ファイルを選択する時のボタンがあるのですが これがなかなかうまくcssが利いてくれなくて困ってました。 ※しかも、ボタン部分だけでなく、ファイル名が表示される部分も残しつつです なんとか解決策が見つかりましたよー 肝はcssの::before 要素。 ::before 要素を使ってボタン部分をデザイ... 続きを読む

<a>か<button>か - hitode909の日記

2017/12/07 91 users Button submit Form 観点 hitode909

2017 - 12 - 07 <a>か<button>か クリックできるものがあって， <a> にするか <button> にするか，という話をしていて，いろんな観点があるなと思ったのでメモ． 単なる画面遷移なら <a> 単にformを送信したいときは， <input type="submit"> や <button> <button> はdisabled属性を使って無効状態にできるので，押せない... 続きを読む

<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった - それマグで！

2014/12/05 167 users image マク blink Presto Opera

2014-12-05 <input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった 復数に分割されたログインID入力が・・・ タイムズカープラスのログインを、ブラウザが学習しない。 Opera(Presto)だと復数にわかれたIDを学習してたのに、Opera(blink)になってから学習しないので、もう面倒だから拡張機能で対応しようとした。 フォームの値をJava... 続きを読む

<input type="file">を装飾する時の注意 | バシャログ。

2014/10/15 19 users File input バシャログ input要素 装飾

どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:... 続きを読む

ブラウザのパスワード保存と自動フィルイン | Cybozu Inside Out | サイボウズエンジニアのブログ

2014/07/16 45 users username method Login input ブログ

こんにちは、開発部の渡辺です。「最近、パスワードインプットのautocomplete属性周りが盛り上がってるよ、ちょっと...準備 まず、ブラウザにパスワードを保存するため、ログイン画面によく見られるフォームを含むHTMLを用意しました。 <form action="/login" method="POST"> <input type="text" name="username"> <input ... 続きを読む

HTML5 - HTMF5 File API で画像をアップロードしてプレビュー - Qiita

2014/07/10 82 users Qiita onChange プレビュー Files File

<input type='file'/> で画像を選択させる input.onchange が発火するのでコールバックをとる File APIがあれば input.files[0] にFileオブジェクトが入ってるの抜き取る FileReader の FileReader#readAsDataURL に Fileオブジェクトを渡す FileRead#onload が発火するのでevent.targ... 続きを読む

パスワード保存と自動フィルインは違うという話 - 金利0無利息キャッシング – キャッシングできます - subtech

2014/07/08 137 users subtech autocomplete password

何か input type="password"のautocomplete="off"をメジャーなブラウザが全て無視するようになったという話があるのですが http://www.slideshare.net/hebikuzure/autocomplete-off 実のところブラウザごとに細かい挙動が違います http://gyazo.com/e06c6d63521249f7a99a2a7c075c... 続きを読む

input type = password autocomplete = off は使ってはいけない

2014/07/05 207 users autocomplete password OFF

Full Name Comment goes here. 12 hours ago Reply Edit Delete Spam Block input type = password autocomplete = off は使ってはいけない Presentation Transcript <input type="password" autocomplete="off"/> は 使ってはいけない... 続きを読む

HTML5で追加されたinput typeのブラウザ対応について検証してみた。 | 株式会社LIG

2013/07/24 140 users 株式会社LIG HTML5 ブラウザ対応

search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによっ... 続きを読む

HTML5 input type="range" で作る 「へぇボタン」 | WWW WATCH

2013/05/15 36 users Range トリビア type CSS おなじみ

HTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。 昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作... 続きを読む

Backbone.jsでつくるMVPなUIパターン【リスト】 ｜ クラスメソッド開発ブログ

2013/03/04 79 users Backbone.js クラスメソッド開発ブログ リスト

今回はBackbone.jsを使ってフォームから追加し、削除できるリストを作ってみたいと思います。デザインは前回同様Twitter Bootstrapで作成しました。 htmlはこちら！ <div id="ui-list"> <div class="list-controls"> <form> <div class="input-append"> <input type="text" placeh... 続きを読む

js で利用する DOM の名前をどうやってつけたらよいのか - willnet.in

2013/03/03 238 users DOM Button update value class

js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('clic... 続きを読む

CSSでiOS風の選択ボタンをつくるチュートリアル。（CSS おれおれ Advent Calendar 2012 – 10日目） | Ginpen.com

2012/12/11 71 users Ginpen.com rAdio Label チュートリアル

CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="frui... 続きを読む

[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン | コリス

2012/08/24 32 users コリス rAdio checked Webkit系 Name

見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="na... 続きを読む

[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル | コリス

2012/02/15 109 users コリス searc Lighter span Form

CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="searc... 続きを読む

document.head がいつも同じ値である保証は無い - masa’s memo

2011/12/02 21 users script head text Body title

html> head id=headelement> title>document.head>title> script> var id1=document.head.id; script> head> body> script> var id2 = document.head.id; script> form name=head id=formelement>input type=text>fo... 続きを読む

Chromeにてアップロードファイルにフォルダを指定するinputタグの記述例 - 強火で進め

2011/11/02 21 users 強火 inputタグ directory Chrome 記述例

Chromeの場合は以下の様に webkitdirectory と directory を付ける(directoryは省略してもOK)とアップロードするファイルの指定としてフォルダが選択できます。実際にはフォルダ内のファイル全てがアップロードされる形になります。 input type="file" webkitdirectory directory /> 実際のコードとしてはこんな感じになります。... 続きを読む

リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌

2011/10/04 78 users オートコンプリート text ユーザビリティ グリッド ヒント

jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらい... 続きを読む

[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート | コリス

2011/09/02 65 users checkbox コリス None display CSS

JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpCon... 続きを読む

パスワード用フィールドを便利にするjQueryプラグイン「showPasswordField」:phpspot開発日誌

2011/08/11 40 users caps タイポ jQueryプラグイン password

altunyurt/jquery.showPasswordField - GitHub パスワード用フィールドを便利にするjQueryプラグイン「showPasswordField」。 <input type="password" はパスワード入力の際に、誰かに盗み見られることなく入力できますが、capsがONになっていたりして大文字が入力されているのに気づかないとか、タイポがあるにもかかわらず、... 続きを読む