HTML&CSS 第六天 笔记

时间:2022-06-01 18:45:24

表单总结:
1:任何的类型的表单项,必有2个最本质的东西:
name<------>value, 即 :变量名<--->变量值

2: 表单的action ,method
action 代表 表单要提交到的地址.
method 代表,表单提交的方法(即,表单数据如何发送.)

3:method的两种方法比较
get与post,
get提交,表单的值直接体现在浏览器上
post提交,直接提交到action规则的url,url不变.

get 提交直接把数据体现在地址栏上,不够安全.
而post不改变地址栏,直接发送数据,因此注册这样的场合,适合用POST提交.

get提交,因为数据在地址栏上体现,因此,能够提交的数据大小受限.(一般来说,受浏览器和服务器的具体限制). 一般来说,能够提交2K以内的数据.,
post提交,理论上没有规定上限值.

get无法上传文件类型
post可以上传文件类型


表单项:
普通文本框: <input type="text" name="xx" value="xx" />
密码框: <input type="passwd" name="xxx" value="xxx" />
单选按钮:<input type="radio" name="xxx" value="具体value" />
复选按钮: <input type="checkbox" name="xxx" value="具体value" />

提交:<input type="submit" value="提示文字" /> (一般不要加name)
重置:<input type="reset" value="提示文字" />

下拉列表:
<select name="xxx">
  <option value="具体值">提示信息</option>
  <option value="具体值">提示信息</option>
  ....................
</select>

文本域:
<textarea name="xxx"></textarea>

文件域:
<input type="file" name="xxx" />

如何设置默认值:
文件类型的表单项,不能设默认值
对于文本框,密码框, 在表单项里加 value="默认值", 即 :加value属性.
对于单选,复选框, 在表单项里加 checked="checked" ,即,checked属性为选中状态.
对于下拉列表, 在option选项里, 加 selected="selected",即selected属性为选中状态.
对于文本域, 直接在<textarea></textarea>之间,打上内容.

 

----作业------
1:写一个注册表单, 包含以上讲解的所有表单项,
以及提交按钮,重置按钮.

2:写一个修改个人的表单, 和注册表单选项一样,但选项要求有默认值.
以及提交,重置按钮.

3:分别把表单设为get提交,post提交,体会两者的不同.
4:要求上述表单提交到 reg.html

 

3种稍特殊一些的表单类型
1:图片类型. 在一个表单中,可以用一个图片代替submit 来进行提交.
例:<input type="submit" value="提交" /> 可以替换成
<input type="image" src="url/image" />

2:隐藏类型.
隐藏类型往往储存一些不需要用户填写,也不希望用户直接看到的信息.
例: <input type="hidden" name="secret" value="dont know" />

3:普通按钮
普通按钮也很常用, 且更多的出现在非表单场合.
比如 : "支持", "购买"等 ,
往往用来提示用户产生下一步的操作.
如何给表单项加默认值?
答:对于text 文本框,password密码框, 直接加value="xxx"
对于textarea 大块文本域, 默认值直接写在textarea标签之间

对于单选radio,和多选的checkbox
对于select 下拉框,
option选项加 selected="selected" 就能默认选中

对于文件类型: __ 不能设__默认值