表单

表单

》经常用的登录注册或搜索引擎等功能,我们需要填写信息,点击确认,一旦确认之后这些信息会被发送到另一台电脑进行验证,这电脑即服务器
》登录、注册就是在和服务器交互
》需要和服务器交互的页面,都需要表单实现
》form就是表单
》表单元素:输入框或按钮
》文本框、密码框、单选框、下拉框
》表单标签
<form action="" method="">
》action:所有表单信息提交的一个目的位置
》method:信息提交的方式,get/post
》表单常用元素:
1、文本框:<input type="text" name="uname">
》明文
》type:输入框的类型
》name:当前输入框的名称,一般自定义,英文或缩写,方便服务器识别输入信息
》value:显示值。无需设置,真正提交给服务器的值
》size:文本框大小
》placeholder:提示信息

2、密码框:<input tyoe="password" name="pwd">
》密文,所有内容黑点代替
3、单选框:<input type="radio" name="sex" value="boy" checked> 男<input type="radio" name="sex" value="girl"> 女 <br>
》要使用相同name属性值控制只能选一个
》checked设置默认选中
4、复选框:
爱好: <input type="checkbox" name="hobby" value="read" checked> 读书
<input type="checkbox" name="hobby" value="game"> 游戏
<input type="checkbox" name="hobby" value="movie"> 电影 <br>
》一般设置相同name值,方便服务器识别输入信息
》value真正提交的值
》checked设置默认选中
5、下拉框
住址: <select name="address">
<option value="山东"> 山东</option>
<option value="江苏" selected> 江苏</option>
<option value="浙江"> 浙江</option>
</select> <br>
》option代表各个选项
》selected设置默认选中
》option的value值是真正提交到服务器的值
6、按钮
1)提交按钮<input type="submit" value="注册">
》提交到服务器
》必须放在form表单里使用
》value设置显示文本
2)重置按钮<input type="reset" value="重置">
》清空表单信息
》必须放在form表单里使用
3)图片提交按钮 <input type="image" src="huipu.jpg">
》作用同提交按钮
4)普通按钮
》本身无任何点击动作,需添加onclick事件
》用在表单里外功能一样
5)button按钮 <button>按钮文字</button>
》若在form表单内,无需添加onclick
》若在表单外,相当于普通按钮,需添加onclick事件


7、其他表单元素
出生日期:<input type="date" name="bdate"> <br>
邮箱:<input type="email" name="email"> <br>
数字:<input type="number" name="num"> <br>
颜色:<input type="color" name="color"> <br>
8、文件域标签
文件域 : <input type="file" name="file"> <br>
9、文本域
文本域: <textarea name="descrip" id="" cols="100" rows="20"></textarea> <br>
》用来填写大段文字
》clos设置宽度
》rows设置高度

10、高级用法
1)隐藏域 <input type="hidden" name="id" value="12345">
》信息需要提交服务器,不想让用户看到
2)只读 <input name="tex" value="我不能被修改" readonly>
》文字只能看不能改
3)设置不可用 <button disabled>按钮文字</button>
》按钮置灰,无法点击
11、特殊符号
》空格 &nbsp;
》大于 &gt;
》小于 &lt;
》引号 &quot;
》版权符号 &copy;

posted @ 2020-08-24 15:57  龙陌  阅读(139)  评论(0编辑  收藏  举报