必読の HTML の基本 -- フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明-htmlチュートリアル-php.cn

必読の HTML の基本 -- フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明

高洛峰

リリース： 2017-02-17 15:57:23

オリジナル

1502 人が閲覧しました

1. フォーム

注: 上記で設定した値は、デフォルトを設定することを意味します値

パスワードボックス

テキストエリア

隠しフィールド

2.送信ボタンクリックすると、フォーム内の送信サーバーのアドレスに移動します

注: 上記の値を設定します。実行時に上に表示されるテキストを表す値。

リセットボタン

通常のボタン

画像ボタン

添付ファイル:

無効にするとボタンが無効になり、有効にするとボタンが使用可能になります。

3. 入力を選択します

ラジオボタングループ値の値はグループ化に使用されます。送信済みプログラムで使用する場合にチェックを入れ、デフォルトのオプションを設定します。

注: ラジオボタングループは、選択後にキャンセルすることはできません。

チェックボックスグループ

注:checked="checked" は、表示されるとすぐにチェックされることを意味し、チェックボックスは選択してキャンセルすることもできます。

ファイルアップロード

input 要素注釈 (マーキング)。

label 要素はユーザーに特別な効果を与えません。ただし、マウスユーザーにとっては使いやすさが向上します。このコントロールは、ラベル要素内のテキストをクリックするとトリガーされます。つまり、ユーザーがラベルを選択すると、ブラウザは自動的にラベルに関連するフォームコントロールにフォーカスを向けます。

ラベルの for 属性は、関連要素の id 属性と同じである必要があります。

ドロップダウンリストボックス

要約すると、HTML プログラムは次のように表示します:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body background="22.jpg">  
<form>  
账号：<input type="text" value="12345" disabled="disabled" /><br /><br />  
密码：<input type="password" /><br /><br />  
说说：<textarea cols="140" rows="8"></textarea><br /><br />  
请问：中华人民共和国成立于那一年？<input type="text" />  
<input type="submit" value="提交" />  
<input type="hidden" value="1949" />  
<input type="reset" /><br />  
<input type="button" value="登录" /><br />  
<input type="image" src="55.jpg" /><br />  
<input type="radio" name="sex" />男<br />  
<input type="radio" name="sex" />女<br />  
<input type="checkbox" checked="checked" />可乐<br />  
<input type="checkbox" />鸡腿<br />  
<input type="file" /><br /><br />  
<select size="1">  
<option value="11">可口可乐</option>  
<option value="22">雪碧</option>  
<option value="33" selected="selected">芬达</option>  
</select>  
</form>  
</body>  
</html>

ログイン後にコピー

実行結果の表示:

分析例: 電子メールインターフェイスプログラムは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body background="11.jpg">  
<font face="华文隶书">  
<table align="center" width="600" height="600" border="1" cellpadding="0" cellspacing="0">  
<tr>  
<td width="150">   邮箱：</td>  
<td><form><input type="text" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td valign="middle"><font color="#999999">需要通过邮箱激活账户，不支持sohu，21cn，sogou的邮箱</font></td>  
  
</tr>  
<tr>  
<td>   登录用户名：</td>  
<td><form><input type="text" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td valign="middle"><font color="#999999">仅在登录时使用，字符数不少于4个</font></td>  
</tr>  
<tr>  
<td>   显示名称：</td>  
<td><form><input type="text" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td><font color="#999999">即昵称，字符数不少于2个</font></td>  
</tr>  
<tr>  
<td>   密码：</td>  
<td><form><input type="password" /></form></td>  
</tr>  
<tr>  
<td>   确认密码：</td>  
<td><form><input type="password" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td><font color="#999999">至少8位，必须包含字母、数字、特殊字符</font></td>  
</tr>  
<tr>  
<td>   性别：</td>  
<td><form><select size="1">  
<option value="1" selected="selected">男</option>  
<option value="2">女</option>  
</select></form>  
</td>  
</tr>  
<tr>  
<td>   喜好：</td>  
<td><form><select size="1">  
<option value="1">打游戏</option>  
<option value="2">打篮球</option>  
<option value="3">看电影</option>  
<option value="4" selected="selected">听音乐</option>  
<option value="5">旅游</option>  
</select></form>  
</td>  
</tr>  
<tr>  
<td></td>  
<td><form><input type="submit" value="注册" /></form></td>  
</tr>  
  
</table>    
</font>  
</body>  
</html>

ログイン後にコピー

必読の HTML の基本 -- フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明

を示します。実行結果は次を示します:

2. 画像ホットスポット

规划出图片上的一个区域，可以做出超链接，直接点击图片区域就可以完成跳转的效果。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<img  src="a006.jpg" usemap="ditu" / alt="必読の HTML の基本 -- フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明" >  
<map name="ditu">  
<area shape="rect" coords="0,0,50,50" href="http://www.baidu.com" />  
<area shape="circle" coords="265,118,80" href="http://qq.com" />  
</map>  
</body>  
</html>

ログイン後にコピー

设计界面：矩形和圆形的地方在运行时，鼠标放上会变成小手状，表示有链接。

必読の HTML の基本 -- フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明