文章目录
表单概述
允许用户输入信息,和提交信息的-收集用户信息。
表单:表单容器+表单控件组成。
控件:输入框、单选按钮、多选、下拉框、多行文本域、文件上传、密码等
一、表单容器(form)
即一般先写表单容器,再再该表单容器中写控件。
html
<form method="get|post" action="url">
//这里可以写任意的控件或其他任意的标签
//method的get、post主要是结合后端,指的是表单的提交方式(快递方式)
//action 指的是提交地址,即将数据发送到哪里(由后端指定)(快递地址)
</form>
二、控件
-
单行输入框 input 默认的
html<input type="text" name="zs" maxlength="100" value="" placeholder="请输入用户名"> //单标记标签、行内元素 属性:(所有的属性都是可选的) 1. type="text" 决定input可以72变的秘诀就是该属性了 可能的值有 type="text(默认值)|password|radio|checkbox|file|button|reset|submit|tel|search|number|date" 等 2.name="uname" 作用:给该控件起名字.名字最好不要写中文 3.maxlength="数字" 作用:允许用户输入的最大的文字数量的个数 4.minlength="数字" 作用:允许用户输入的最少的文字个数 5.size="数字" 作用:表示输入框的长度(尺寸),值越大,输入框越长 6.value="" 作用:控件的内容(一般是用户输入的文字会保存到该属性中) 7.placeholder="控件的提示文字" 作用:增加用户体验,告诉用户输入框要输入什么内容 8.disabled="disabled" 作用:是否禁用表单控件,添加为禁用,去掉为取消禁用,禁用后该输入框不可用(灰色) 9. readonly="readonly" 作用:只读。只能显示用户输入的信息,不能修改
-
密码输入框 input
html<input type="password"> 属性同上。
-
单选 input
html<input type="radio"> 属性:除3、4、5、7外 如何实现多选一:给他们使用name属性分组,name属性的值保持一致即可。 如何设置默认选中状态: 给其添加:checked="checked" 属性
-
多选 input
html<input type="checkbox"> 属性同radio 也可以通过checked="checked" 设置选中状态
-
文件上传 input
html<input type="file"> 属性同普通输入框 外观在不同的浏览器下可能会不一样。都是正常的,无需理会
-
按钮 input、button
html<input type="button|reset|submit"> 属性:除3、4、5、7外 a. 普通按钮button b.重置按钮reset c.提交按钮submit
-
下拉选项框 select
html//写法类似于列表ul一样 <select> <option>列表项1</option> <option>列表项2</option> </select> //属性: 1.name="uname" 2.value="" 3.size="数字" 4.readonly="readonly" 5.disabled="disabled" 6.selected="selected" 写在option 7.multiple="multiple" 多选,写在select中
-
多行文本域 textarea
html
<textarea >
</textarea>
属性:
1.value
2.readonly="readonly"
3.disabled="disabled"
4.cols="数字" 决定宽度(列数)
5.rows="数字" 决定高度(行数)
-
label标签
作用:增加用户体验,增加点击区域的
html1. 将控件包起来(嵌套) <label> <input type="checkbox" checked="checked">长沙 </label> 2. 使用for属性(推荐) 分开写(并列) <input type="checkbox" id="sz"> <label for="sz">长沙</label>
总结:单标记标签大全
html
1.meta
2.br
3.hr
4.img
5.input
相关单词
- method 方法、方式
- get 获取
- post 贴,发布
- form 表单
- action 提交方式,
- input 输入
- type 类型
- maxlength 最大长度
- minlength 最小长度
- value 值
- placeholder 占位符
- radio 广播、单选
- button 按钮
- reset 重置
- submit 提交
- label 标签
获取本次课程作业和案例
如需本次课作业、笔记、案例等,请通过下方二维码获取。