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

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

行動規範の内容に同意します

回答3件

的外れかもしれませんが、以下のように行ってはいかがでしょうか？
以下のコードではフォームに入力した文字とプレースホルダが重なって表示されてしまいますが、これが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〜) を使えば良いと思います･･･。