2018/07/09

Posted 2020-12-03 wjglm

 

表单：收集用户的输入 发送到后台
　　<form action="后台地址" method="提交方式" 提交方式：get（默认） post >
　　　　表单元素
　　</form>

　　<fieldset>表单外边框</fieldset>
　　<legend>表单标题 </legend>

 

　　1、表单元素的通用格式

　　　　label标签:界面友好
　　　　　　两种方式：
　　　　　　　　直接label套表单元素 label > <input type="radio" name="sex">男 </label>
　　　　　　　　根据绑定元素id <input id="rad" type="radio" name="sex"><label for="rad">女</label><br>

　　　　<input type="类型">
　　　　　　表单元素：
　　　　　　　　文本类型：
　　　　　　　　　　文本框：text
　　　　　　　　　　密码框：password
　　　　　　　　　　隐藏域：hidden
　　　　　　　　　　多行文本:textarea
　　　　　　　　选择域：
　　　　　　　　　　单选:radio
　　　　　　　　　　多选:checkbox
　　　　　　　　　　下拉:select option
　　　　　　　　按钮：
　　　　　　　　　　补充按钮:button
　　　　　　　　　　提交按钮:submit
　　　　　　　　　　重置:reset
　　　　　　　　其他：文件file 需要属性 enctype="multipart/form-data" 文件上传支持 ，
　　　　　　　　　　　图片img，日期date，颜色color

　　2、下拉格式
　　　　<select name="" id="">
　　　　　　<option value="">未知</option>
　　　　　　<option value="">苗条</option>
　　　　　　<option value="">小巧</option>
　　　　</select>

3、多行文本格式
　　<textarea name="" id="" cols="30" rows="10">

　　</textarea>

　　练习：
　　　　<form action="#" method="get">

　　　　　　　　　　　　注释：{method传值方式  : get传值方式  form.html?uid=123 & pwd=pwd ?键值对&键值对
　　　　　　　　　　　　　　　　　　　　post传值方式 在请求里面看不到}
　　　　　　账号：<input type="text" name="uid"><br>
　　　　　　密码：<input type="password" name="pwd"><br>
　　　　　　<button>登录</button>
　　　　</form>
　　　　

　　练习：
　　　　<fieldset>
　　　　　　<legend>注册表单</legend>
　　　　　　<form action="#" method="post" enctype="multipart/form-data">
　　　　　　　　用户名：<input type="text" name="uid1"><br>
　　　　　　　　密码：<input type="password" name="pwd1"><br>
　　　　　　　　隐藏域：<input type="hidden" name="hid">123456<br>

　　　　　　　　性别：<label > <input type="radio" name="sex">男 </label>
　　　　　　　　　　　　　　　　　　　　　　　　注释：{radio 的 name用来分组，一组传一个值}
　　　　　　　　　　　<input id="rad" type="radio" name="sex"><label for="rad">女</label><br>

　　　　　　　　民族： <select name="" id="">
　　　　　　　　　　　　<option value="">汉族</option>
　　　　　　　　　　　　<option value="">满族</option>
　　　　　　　　　　　　<option value="">蒙古族</option>
　　　　　　　　　　　　</select><br>
　　　　　　　　爱好: <input type="checkbox">英雄联盟
　　　　　　　　　　　<input type="checkbox">英雄联盟
　　　　　　　　　　　<input type="checkbox">英雄联盟 <br>
　　　　　　　　个人简介: <textarea name="" id="" cols="30" rows="10"></textarea><br>
　　　　　　　　文件上传: <input type="file"> <br>
　　　　　　　　<input type="button" value="普通注册按钮"><br>
　　　　　　　　<input type="submit" value="提交注册按钮"><br>
　　　　　　　　<input type="reset" value="重置注册按钮"><br>
　　　　　　</form>

　　　　</fieldset>


　　　　<fieldset>
　　　　　　<legend>htnl5新增表单元素</legend>
　　　　　　<form action="#" method="post">
　　　　　　　　email: <input type="email"> <br>
　　　　　　　　month:<input type="month"> <br>
　　　　　　　　number:<input type="number"> <br>
　　　　　　　　<button>提交</button>
　　　　　　</form>
　　　　</fieldset>