[B! HTML form] o_tiのブックマーク

The form element

o_ti 2020/07/05

form要素に指定できる属性についての解説

リンク

A Sliding Nightmare: Understanding the Range Input | CSS-Tricks

You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it’s not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider loo

o_ti 2018/01/09

input type=range

リンク

HTML5 Form Validation のカスタマイズ

Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u

o_ti 2016/04/12

リンク

プレースホルダとHTML5のplaceholder属性

プレースホルダとHTML5のplaceholder属性 HTML5で導入されたplaceholder属性によって、フォームの入力欄にプレースホルダを設定できるようになりました。さて、この「プレースホルダ」とはそもそもなんなのでしょうか。また、プレースホルダにはどのようなテキストを書けばよいのでしょうか。プレースホルダってなに? フォームの入力欄に、薄い灰色のテキストが表示されているものを見かけます。あのテキストや、テキストを提供する仕組みは、プレースホルダと呼ばれています。 Safariではアドレスバーに“Go to this address”、検索バーに“Google”というプレースホルダが設定されている。「プレースホルダ (“placeholder”)」とは、「実際のものに代わって現れるもの」を意味します。たとえば、Webサイトのテンプレートを作る際に、実際のページにはないテキス

o_ti 2015/12/11

リンク

[iOS8]クレジットカード読み取りに対応したフォームの作り方 - Qiita

はじめにクレジットカードのスキャン機能が超便利！ iOS 8ではSafariの機能が改善され、クレジットカードをカメラでスキャンするだけで、カード情報が自動で入力されるようになりました。面倒な数字の羅列の入力も、カメラをかざすだけで完了です。実装したいけど情報が少ない・・・この新機能に対応した入力フォームを作ろうと思ったのですが、ググってみると意外と情報が少なかったのでまとめてみました。スキャンで自動入力可能な情報カード番号（14〜20桁の数字）有効期限（月/年）カードの種類（VISA、JCBなど）名義人氏名は自動入力できないようです。スキャン時には文字が認識されているようなのですが。 (やり方をご存知の方がいらっしゃいましたらぜひ教えてください！) フォームの書き方試行錯誤の末にようやくルールみたいなものが見えたのでまとめました。下記、それぞれの入力フォームの記述例で

o_ti 2015/10/26

カメラでクレジットカード読み取りに対応したフォーム

リンク

Stretchy: Form element autosizing, the way it should be.

Examples Textarea: Input with placeholder: Input with intial value: Number input: Select: More examples in the testsuite. [Documentation on GitHub](https://github.com/leaverou/stretchy/#readme)

o_ti 2015/08/11

input[type=text]とtextareaを入力したコンテンツに合わせて可変にする

JS
HTML form

リンク

How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select your option</option> <option value="hurr">Durr</option> </select> But the 'Select your option' is in black instead of lightgrey. So my solution could possibly be CSS-based. jQuery is fine too. This

o_ti 2015/06/23

disabledとselectedの併用でselect要素のplaceholderらしきものを表現する

リンク

【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 at softelメモ

【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。問題フォームがEnterキー押下でsubmitしてくれたり、くれなかったりするのですが、何かルールがあるのですか。特に、サブミットボタンがないフォームについて。特に、入力欄が1つのときと、2つのときの違いについて。例1 form内にinput[type=”text”]が1つだけ <form method="post" action="?"> <input type="text" name="test"> </form> Enter押下でSubmitします（だいたいのブラウザで）例2 form内にinput[type=”text”]が2つある <form method="post" action="?"> <input type="text" name="test"> <

o_ti 2015/01/30

リンク

はてなブックマーク

タグ

関連タグで絞り込む (11)

HTML formに関するo_tiのブックマーク (8)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第4週）

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス