9.1使用表单标签form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
9.1.1处理动作action<br>
<form action="9.1使用表单标签form.html">
<input type="submit" value="表单提交"/>
</form>
9.1.2表单名称name<br>
<form action="9.1使用表单标签form.html" name="表单">
<input type="submit" value="表单">
</form>
9.1.3传送方法:method:get,post<br>
9.1.4编码方式:enctype:text:纯文本;form-data/mul:上传文件的表单必须选择该项<br>
9.1.5目标显示方法:target<br>
<form action="9.1使用表单标签form.html" name="表单" method="post" enctype="text/plain" target="_blank">
<input type="submit" value="表单">
</form>
</body>
</html>
9.2添加控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="控件名称" type="控件类型"/>
</form>
text:文字字段
password:密码*
radio:单选按钮
checkbox:复选按钮
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图形域
hidden:隐藏域,不显示在页面,但是会传递到服务器上
file:文件域
</body>
</html>
9.3输入类的控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
9.3.1文字字段text
<input type="text" name="控件的名称" size="空间的长度" maxlength="最长的字符数" value="默认值"/><br>
<h1>用户调整</h1>
<form action="9.2添加控件.html" method="post" name="登录">
姓名:<input type="text" name="username" size="20"><br>
网址:<input type="text" name="URL" size="20" maxlength="50" value="http:">
</form>
9.3.2密码域password
<input type="password" name="控件名称" size="空间的长度" maxlength="最长的字符数" value="默认值"/>
9.3.3单选按钮radio:name一样组成一组单选按钮
<input type="radio" name="控件名称" >
9.3.4复选框checkbox
9.3.5普通按钮button
9.3.6提交按钮submit
9.3.7重置按钮reset
9.3.8图像域image
9.3.9隐藏域hidden
9.3.10文件域file
<form action="9.1使用表单标签form.html">
用户名<input type="text" name="username"/><br>
密码<input type="password" name="password"/><br>
确认密码<input type="password" name="yespassword"/><br>
<input type="radio" name="radio1" value="A">A
<input type="radio" name="radio1" value="B">B
<input type="radio" name="radio1" value="C">C
<input type="radio" name="radio1" value="D">D<br>
<input type="checkbox" name="check1" value="A1"/>AA
<input type="checkbox" name="check1" value="B1"/>BB
<input type="checkbox" name="check1" value="C1"/>CC
<input type="checkbox" name="check1" value="D1"/>DD<br>
<input type="reset" name="restebt" value="重置"/><br>
<input type="image" src="123.jfif" name="Bob"/><br>
<input type="hidden" name="action" value="page"/>
<input type="file" name="file"/>
</form>
</body>
</html>
9.4列表菜单标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>格式:</pre>
name菜单和列表的名称
size现实的选项数目
multiple:列表中的项目多选
value:选项值
selected:默认选项
<select>
<option value="" selected="selected">选项显示内容1</option>
<option value="" selected="selected">选项显示内容2</option>
<option value="" selected="selected">选项显示内容3</option>
</select>
案例<br>
<form action="123.jfif" name="表单">
<select name="music" size="5" multiple="multiple">
<option value="rock" selected="selected">摇滚乐</option>
<option value="pop" selected="selected">流行乐</option>
<option value="dj" selected="selected">打击乐</option>
</select>
<select name="music2" size="5">
<option value="rock" selected="selected">摇滚乐</option>
<option value="pop" >流行乐</option>
<option value="dj" >打击乐</option>
</select>
</form>
</body>
</html>
9.5文本域标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="123.jfif">
留言:<textarea name="wenben" value="文本值默认值" rows="5" cols="10"></textarea>
</form>
</body>
</html>
9.6id属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
id="元素标识符",由于id用来表示页面的唯一元素,因此在定义标记名时最好要根据其含义进行命名,
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
