質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3818閲覧

html4.01 strictでもplaceholderを使える方法

naonao11

総合スコア97

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/06/17 09:10

placeholderを使いたいのですが、html4.01strictを使っているためどう行えばいいのか分かりません。
またJavaScriptを用いずに行え、との事なのでcss、html4.01で行える方法を教えて頂きたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

的外れかもしれませんが、以下のように行ってはいかがでしょうか?
以下のコードではフォームに入力した文字とプレースホルダが重なって表示されてしまいますが、これがHTML4.01とCSSでの限界です。多少文法を気にしないならば回答文に追記したように行えますが、もしも可能ならばHTML5もしくはjavascriptを使ったほうが良いと思います。

HTML

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3<html lang="ja"> 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>タイトル</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 label, input { 14 position: relative; 15 } 16 17 label::after { 18 content: "text"; 19 position: absolute; 20 left: 2.5em; 21 color: #666666; 22 } 23 24 input:focus { 25 z-index: 1; 26 } 27 </style> 28</head> 29<body> 30<form action=""> 31 <div> 32 <label class="input">text: 33 <input type="text" name="text" value=""> 34 </label> 35 </div> 36</form> 37</body> 38</html>

追記

文法的に良くないのですが、required属性を使うことでさらにplaceholder属性の動きに近いものを実装することができます。また、わざわざrequired属性を使うくらいならplaceholder属性をそのまま使うという方法もあります。後者のほうが簡単ですね。

HTML

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3<html lang="ja"> 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>タイトル</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 label, input { 14 position: relative; 15 } 16 17 label::after { 18 content: "text"; 19 position: absolute; 20 left: 2.5em; 21 color: #666666; 22 } 23 24 input:focus, input:valid { 25 z-index: 1; 26 } 27 28 :invalid { 29 box-shadow: none; 30 } 31 32 :-moz-submit-invalid { 33 box-shadow: none; 34 } 35 36 :-moz-ui-invalid { 37 box-shadow: none; 38 } 39 </style> 40</head> 41<body> 42<form action=""> 43 <div> 44 <label class="input">text: 45 <input type="text" name="text" value="" required> 46 </label> 47 </div> 48</form> 49</body> 50</html>

投稿2017/06/17 10:39

編集2017/06/17 13:59
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyahan

2017/06/17 13:35 編集

なかなかにアクロバティックですね・・・。フォームに文字を打ち込むと、入力値と placeholder もどきが重なってかなり醜い状態になるので、ちょっと実用性が低い気がします。 また、required 属性(HTML5〜) を使っていいのなら、はじめから placeholder(HTML5〜) を使えば良いと思います・・・。
s8_chu

2017/06/17 13:48

> また、required 属性(HTML5〜) を使っていいのなら... おっしゃるとおりです...
guest

0

inputタグの placeholder 属性のことでしょうか? 同属性は HTML5 から導入されたものですが、たいてのブラウザは HTML 4.01 Strict と宣言していても動作するので、そのまま使ってしまって構わないと思います。

厳格に従えというのであれば、時代遅れな HTML4 からいますぐ HTML5 に切り替えるべきです。提供できるユーザーエクスペリエンスが格段に向上します。

あとは、placeholder に対応していない古いブラウザ向けに、同機能を提供する jQuery プラグインなどがありましたが、これもJSが使えないのであれば無理ですね。

というわけで、そのまましれっと使ってしまうか、HTML5にするか、あきらめて <input> の下に注釈を入れて対応するかのどれかだと思います。

投稿2017/06/17 10:30

miyahan

総合スコア3095

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

HTML4+CSSでは、無理をしてもs8_chuさんの回答まででしょう。
実際にはtitle属性に説明を書くか、近くにカッコ書きしておくくらいが無難だと思います。

そもそもどうして HTML 5 が使えないのでしょうか?
古いブラウザに対応するということなら、IE6-10にあるDOCTYPEスイッチは

HTML

1<!DOCTYPE html>

と書けば、HTML 4.01 Strict と同様にStandardモードになります。
JavaScriptも使えないということから、いわゆるISO-HTMLでも使うのでしょうか?

投稿2017/06/19 01:42

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問