表单标签主要功用是用来收集使用者资料
常用情况 : 注册页面...
主要由 表单域、表单元素、提示文字 这三种内容组成
以MOMO注册页面为范例:
1.表单域
表单域标签
<form action="url"地址 method="提交方式(分为get & post)" name="表单名称">
各种表单元素以及提示文字(表单内容)
</form>
2.表单元素
主要分为三种表单元素:
<input> : 输入类型表单元素
<select> : 下拉类型表单元素
<textarea> : 文本域表单元素
a. input 输入类型表单元素
<input>标签用於收集用户信息
input标签後面会包含一个type属性
根据type属性不同有不同种的形式
(文本字段,复选框,单选按钮,按钮等) (以上为单标签)
type属性:
button 定义可点击按钮
checkbox 定义复选框
file 定义上传文件
hidden 定义隐藏的输入字段
image 定义上传图片
password 定义密码输入字段(输入的内容会被隐藏)
radio 定义单选按钮
reset 定义重制按钮 (点击後清除表单中的数据)
submit 定义提交按钮 (点击後把表单数据送到服务器中)
text 定义单行的输入字段 (默认宽度为20字符)
除了type属性外,input标签後常包含的其他属性:
name 属性 : 定义input元素的名称
value 属性 : 规定input元素的值
checked 属性 : 规定input元素加载网页时应被选中
maxlength 属性 : 规定输入字段的字符最大长度
备注 :
1.name 和 value 是美的表单元素都有的属性值,主要给後端人员使用
2.name表单元素的名子,要求单选按钮和复选框需要有相同的name值
3.单选框和复选框可以设置checked属性,当页面打开时就可以默认选中
ex: checked = checked
<label>
标签
使用场景:
<label>
标签用於绑定一个表单元素 当点击<label>
标签内文本时
浏览器就会自动转到或选择对应的表单元素以增加用户体验
<label for = "sex">男</label>
<input type="radio" name = "sex" id = "sex">
核心 : <label>标签的for属性应当= 相关元素的id属性
b. select 下拉表单元素
如果有多个选项让用户选择并想要节约页面空间时
使用<select>
定义下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
备注 :
<select>
中至少包含一对<option>
<option>
中定义 selected = "selected"时当前项为默认选中项c. textarea 文本域元素
当需要用户输入内容较多时使用<textarea>
标签
<textarea>
是用於定义多行文本输入的控件
常见用於留言板.评论区
<textarea rows="3" cols="20">
文本内容
</textarea>
备注:
<textarea>
标签可以轻松的创建多行文本输入框(但在实际中较少使用,都是使用CSS来改变大小)
哈罗,大家好,我是韦恩。今天的文章是系列文的第三十六篇。我们会把完整snippet的元件与routi...
前几篇我们学会了TextView和Button基本用法 今天我们把两个结合在一起 做3颗按钮: 其中...
注:只要属性的开头跟结束之间没有打上任何的文字,就可以将属性合并成一个,例如< hr/ >...
今天要来讲该如何使用Unity里面的工具来制作树木以及地形 ...
Impair Process Control 攻击者尝试修改、关闭、损坏影响物理控制流程,影响设备生...