主要内容
表单应用场景
表单结构
常用表单元素使用
表单交互属性
案例
注册或登录页面都要用到
收集信息,数据打包,传输给服务器,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>
value值才是表单要传输给服务器的值
单行文本域 要放在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传递参数,对所发送信息的数据有限制,一般用于信息获取
post:表单数据作为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
总结
表单在form标签里添加相应的表单元素:文本域,单选,复选,列表,按钮
type:text,password,file,radio,checkbox
单行文本域:name,maxlength,size,value,placeholder提示
get与post的区别。
next:一个简单的 html结构