ディレクトリ
1.formフォーム
ユーザー入力を取得することができます(入力、選択し、アップロードされたファイル)
そして、ユーザ入力は、後端部の全てに送信されます
HTML使用表单向服务器提交请求,表单、表单控件的主要作用就是收集用户输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器。
フォーム要素
Form元素用于生成输入表单,是一个非可视化结构,所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中。(每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数。拥有共同name的控件为一组,只生成一个请求参数,但该参数有多个值。)
機能
- アクションは、フォームの送信データ形式をトリガすることができ、2つのラベルがあることができます
**********
input标签type=submit
button标签
- すべてのラベルは、ユーザ入力がname属性を持つ必要があり得ます
**********
name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中
選択ボックススプレッドのバックエンドのデータはvalue属性によって決定されます
フォームフォームデータの提出に次のパラメータのenctype = "multipart / form-data" を変更する必要があります
パラメータ
- 行動制御アドレスデータが提出します
三种书写方式
1.不写 默认就是朝当前这个页面所在的地址提交数据
2.写全路径("完整的url网址")
3.只写路径后缀(/index/)
- 提出されたデータを制御する方法方法
get请求
from表单默认的是get请求,携带的数据默认跟在url后面,也就是"?"后面
post请求
数据以键值对在http请求体重发送给服务器
*********************************************************
1、get:表单数据会被encodeURIComponent后以参数的形式:name1=value1&name2=value2 附带在url?后面,再发送给服务器,并在url中显示出来。
2、post:enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码,数据以键值对在http请求体重发送给服务器;如果enctype 属性为"multipart/form-data",则以消息的形式发送给服务器。
- 名前:フォームの名前
- ターゲット:指定した方法でURLを開きます
(提交请求会打开另一个URL资源)。_blank、_parent、_self、_top。
フォームでのコントロール要素
1. INPUTの使用
通常、入力ラベルが必要と組み合わせて使用します
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后点击label标签内任何的位置都可以自动选中input框
- 単一行テキストボックス:type属性がテキストです。
- パスワード入力ボックス:パスワードのtype属性。
- 日付セレクタ:これまでのタイプ。
- 隠しフィールド:type属性が隠されています。
- シングルボックス:type属性がラジオです。(同じグループの同じ値の名前)。
- ボックス:type属性がチェックボックスです。
- ファイルアップロードフィールド:ファイルへのtype属性。(提出のグラフィックバージョンに相当します。)
- 送信:type属性を提出します。
- リセット:type属性はリセットされます。
- アクションなしボタンありません:type属性ボタン。
- カラーピッカー:タイプは色です。
- ドラッグバー:レンジのタイプ。この場合、入力は分(最小ドラッグバー)、MAX(最大ドラグバー)、工程(ステップ)を選択してもよいです。
- 検索するタイプ:入力ボックスを検索します。
- プロパティがチェック:設定された単一のボックス、チェックボックスの初期状態が選択されている場合。
- プロパティは、入力ボックスを無効に無効に
- プロパティ値は、デフォルト値を設定しました
input标签可以加disable属性 禁用该input框
input标签可以加value属性 设置默认值
选择的标签 如何默认选中
radio
checkbox
checked='checked'
当属性名和属性值相同的时候 可以只写属性名(******)
图像域:type属性为image。
属性 maxlength:指定文本框所允许输入最大字符数。
属性 readonly:指定只读。
属性 src、width、height:指定图像URL、宽、高。(type为image时)。
//(以下为HTML5新增type)
时间选择器:type为time.
本地日期、时间选择器:datetime-local。
周选择:type为week。
月份选择器:type为month。
E-mail输入框:type为email。
电话号码输入框:type为tel。
URL输入框:type为url。
只能输入数值的文本框:type为number。
2.selectラベル
リスト項目またはメニュー項目:(select要素のサイズや複数の要素は、リストボックスを作成する指定限りとして)オプションをリストボックスまたはドロップダウンメニューを作成するための要素は、一つの選択肢です。
- リストボックスやドロップダウンメニューで複数選択を許可するかどうか:プロパティの複数を選択します。
- 同時に表示することができますどのように多くのリストの項目を指定するために、リストボックス:プロパティのサイズを選択します。
- アイテム:サブ要素のオプションを選択
select子元素 optgroup:将option项分组。
option属性 disabled:禁用该选项。
option属性 selected:指定初始状态是否被选中。
option属性 value:该项的请求参数值。
optgroup属性 label:指定该组标签。必填
optgroup属性 disabled:禁用该选项组。
3.textarea要素
複数行のテキストフィールドを生成するために、テキストの大きなセグメントを得ます
属性cols:指定文本域宽度
属性rows:指定文本域高度
disabled:禁用文本域
readonly:只读
maxlength:设置文本域最多可以输入的字符数。
wrap:指定多行文本域是否添加换行符。如果不添加换行符,那么请求参数将会舍弃文本域的格式,只保留文本发送到URL。如果文本较多且格式较复杂,应指定wrap属性。
4.autofocusプロパティ
プロパティが唯一のプロパティセットを持つことができますので、フォームの後、コントロールがフォーカスを持っていた後、ページがロードされ、この特性を向上させます。
2.CSS
CSSは、このように大幅に作業効率を向上させる、スタイルシートを導入することによって、カスケーディングスタイルシート(カスケードスタイルシート)を意味します。
1.基本的な文法
セレクタ、および1つまたは複数の宣言:CSSルールは、2つの主要部分から構成され
css的语法结构 选择器 {属性1:属性值1}
HTML要素のidとクラスは、2人の基本的な公共の財産です。
- (1)クラスラベルの複数を同時に定義することができます。
- (2)IDも名前は、標準のHTMLの差があること、名前を書くことができ、我々はname属性を使用しないようにしてくださいので、XHTMLとidは、今や標準的なWeb IDを使用している、標準です。
CSSのコメント
单行 /*这里是单行注释*/
多行
/*这里是多行
注释
*/
2.css 3つの参照
HTMLにおけるCSSの導入3つの方法があります。
2.1 Waibuyangshibiao
Waibuyangshibiaoは、参照CSSスタイルシートにHTML文書内のリンクタグ、その後、個別に異なるコードファイルの理想的なリファレンスCSS、HTMLやCSSのコードです。
<link rel="stylesheet" href="样式表.css">
注:Waibuyangshibiaoリンクタグはheadタグに関連して使用されます。
2.2内部スタイルシート
内部スタイルは、CSSのコードでは、同じファイルにCSSコードやHTMLコードを参照します