表单应用场景
表单结构
常用表单元素使用
表单交互属性
案例
刚开始可能有些枯燥，但请相信我，学完后我想你肯定会收获很多，对网站网页都会有更多了解。
注册或登录页面都要用到
收集信息，数据打包，传输给服务器，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结构
最新评论