form标签
作用
发出get或者post请求,刷新页面
属性
action:往哪里发请求,接受请求的url
method:控制用get还是post请求
autocomplete:自动填充,可以为on或者off
- off:表示在每个输入域中,用户必须显式的输入一个值,或者document以它自己的方式提供自动补全功能;但是浏览器不会帮忙自动补全
- on:浏览器能根据永辉在前在标签中输入的值自动补全,会给出填写这个表单的提示
比如:在百度搜索中输入“有道翻译”如果之前有输入过,当输入“有道”时,就会自动显示“有道翻译”,这就是autocomplete:on
target:表示在当前页面(_self)提交还是在新的页面(_blank)提交
label 标签和input标签
label标签属性for和input标签的id属性必须保持一致
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>
input 的submit和button的submit的区别
input标签里不能再有其他的标签
button标签里还可以有其他的标签
input标签
作用:
实现可让用户操作,输入或者选择
属性
类型type:
- text输入文本
- password 输入密码
- radio 单选
- 如何实现多个选项中的单选
- 保证每个input的name一致
- 如果有checked,表示默认选择某个选项
- 比如
兴趣爱好:
<input type="radio" name="hobby" >读书</input>
<input type="radio" name="hobby">听音乐</input>
<input type="radio" name="hobby">唱歌</input>
- checkbox 多选
- 同样的,如果想在多个选项中实现多选,要保证name一致
- 如果有checked,则默认选择某个选项
- file 上传文件
- 上传一个文件 <input type="file" />
- 上传多个文件 <input type="file" multiple>
- textarea文本框
- 如何设置文本框不能自由拖动,固定大小
- <textarea style="resize:none;width:50%;height:50%;"></textarea>
- select 下拉菜单
- 如果某个选项中有“selected”,则默认选择该选项
注意事项
- 一般不监听input的click事件
- form里的input要有name
- form里一定要有一个type=submit的input或者button来触发submit事件,提交表单
img标签
作用
发出get请求,展示图片
属性
- src:图片的地址
- alt:图片不能显示的时候,用alt的内容代替
- width/height:为了不让图片的宽高比改变,只设置宽或者高,让图片自适应
事件
onload事件:加载成功
onerror事件:加载失败
响应式
img{
max-widht:100%
}
实现图片自适应不同屏幕的大小