3.フロントエンドエントリのHTMLフォーム

メインコンテンツ
フォームアプリケーションシナリオ
フォーム構造
一般的なフォーム要素の使用
フォーム相互作用プロパティ
ケース

登録ページまたはログインページは
、情報の収集、データのパッケージ化、サーバーへの送信、およびWebとの対話に使用されます。

表单
<form>
	表单元素:文本框,单选框,复选框,按钮,列表...
	<input>表单输入
	<select>菜单和列表
	<option>列表项目
	<textarea>文字域
	<optgroup>项目分组
</form>

<input type="类型属性" name="名称"/>
type:text,password,file,checkbox,radio,button,submit,reset,hidden,image

注册信息小栗子
<h1 align="center">注册信息</h1>
<hr color="#369" />
<form>
	<table width="600px" bgcolor="#f2f2f2" align="center">
		<tr>
			<td align="right">姓名: </td>
			<td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="please input your name" /> </td>
		</tr>
		<tr>
			<td align="right">邮箱:</td>
			<td align="left"><input type="text" name="email" size="25" value="@163.com" /> </td>
		</tr>
		<tr>
			<td align="right">密码: </td>
			<td align="left"><input type="password" name="password" size="25" maxlength="6" placeholder="please input your password" />  </td>
		</tr>
		<tr>
			<td align="right">确认密码:</td>
			<td align="left"><input type="password" name="password" size="25" maxlength="6" placeholder="please input your password again" />  </td>
		</tr>
		<tr>
			<td align="right"> 上传图片:</td>
			<td align="left"> <input type="file" name="file" /> </td>
		</tr>
		<tr>
			<td align="right"> 性别:</td>
			<td align="left"> <input type="radio" name="sex" value="male" checked/><input type="radio" name="sex" value="female"/><input type="radio" name="sex" value="mystery"/>秘密
			</td>
		</tr>
		<tr>
			<td align="right">爱好:</td>
			<td align="left"> <input type="checkbox" name="hobby" value="read" checked/>阅读
				 <input type="checkbox" name="hobby" value="dance"/>跳舞
				 <input type="checkbox" name="hobby" value="sing"/>唱歌				 
			</td>
		</tr>
		<tr>
			<td align="right">爱好的食物:</td>
			<td align="left"> <input type="checkbox" name="food" value="ham" checked/>汉堡
				 <input type="checkbox" name="food" value="fries"/>薯条
				 <input type="checkbox" name="food" value="rice"/>米饭				 
			</td>
		</tr>
		<input type="button" name="button" value="click me"/>
		<input type="submit" name="submit" value="submit"/>
		<input type="reset" name="reset" value="reset"/>
		<input type="image" name="image_button" src="imageurl"/>
	</table>
</form>

値の値は、フォームがサーバーに送信する値です。

单行文本域  要放在form里
	<input type="text">
	可以拥有的属性:name,maxlength,size,value,placeholder规定用户填写输入字段的提示
	密码域也是文本域的形式,输入到文本域的文字"...."显示
	图像域:type="image" name="" src="imageurl"
	隐藏域:type="hidden"
	

	<select name="城市">菜单和列表
		<option>--请选择--</option>
		<optgroup label="1">
		<option value="g">广州</option>
		<option value="s" selected>上海</option>
		</optgroup>
		<optgroup label="2">
		<option value="d">东莞</option>
		<option value="c">长沙</option>
		</optgroup>
	</select>

	select标签属性有:
	name设置下拉菜单和列表的名称,multiple设置可多选,size设置列表可见选项数
	
	<optgroup>项目分组

	<textarea name="" rows="" cols="" placeholder="please input some words">多行文本域</textarea>

全体は完成しましたが、レイアウトが良くありません。対応する属性を追加して、より美しくします。

フォームを送信するためのデータを入力し、それをWebサーバーにパッケージ化してから、php、asp処理
getとpostの違い
get:urlを使用してパラメーターを渡します。送信される情報のデータには制限があり、通常は情報取得の
投稿に使用されます。httpリクエスト本文の一部としてのフォームデータ。送信される情報の量に制限はありません。通常、サーバー上のリソースを変更するために使用されます。

<form action="action.php" method="post" name="">
表单元素
</form>
action  URL 提交表单时向何处发送表单数据
method  get,post  设置表单以何种方式发送到指定页面
name    form_name  表单的名称
target  _blank,_self,_parent,_top   在何处打开action URL

  		application/x-www-form-urlencoded
enctype		multipart/form-data		在发送表单数据之前如何对其进行编码
				text/plain

概要
対応するフォーム要素をフォームタグに追加します:テキストフィールド、単一選択、チェック、リスト、ボタン
タイプ:テキスト、パスワード、ファイル、ラジオ、チェックボックス
1行のテキストフィールド:名前、最大長、サイズ、値、プレースホルダープロンプト
getポストとの違い。

次へ:単純なhtml構造

おすすめ

転載: blog.csdn.net/qq_44682019/article/details/108816351