form标签的属性:
action:提交的地址(DBA数据源提供)
method:提交方式
get (默认值)会把用户输入的内容展示到地址栏
post 地址栏不会显示用户输入的内容
子元素input是一个自闭合元素
input标签的类型取决于type取值
text:单行文本输入框
password:密码输入框
radio:单选框
checkbox:多选框
由于用户的操作行为不同,导致不是所有人都会点击输入框
也可能会点击相应的文字
为了使文字与输入框相关联,添加label标签
如何关联:
label的for属性值与input的id值相同,则成功关联
适用场景:
注册、登录页面
提交、搜索功能
<section>
<label for="1">用户名</label>
<span>*</span>
<input type="text" id="1" name="username" value="123" placeholder="请使用手机号或邮箱" required>
当前案例下
添加id属性,是为了与label关联
添加name属性是为了给当前这个输入的值一个名字
便于后期储存
注册会员 会员名单(没有你)
F68 用户名:F68
123 密码:123
注:要在input添加一个name属性
为了告诉接受者,每个值代表含义
取得名字 用户输入的值
username = 用户名:F68
pwd = 123
取得名字,叫键名
用户名输入的值,叫键值
键值对(键和值是成对出现)
class="box"
class属性名
box属性值
文本输入框的默认值
value属性名和其值,会提交上去,但是用户要先删除提示信息再进行编辑
placeholder代表提示信息,不会提交上去
当用户输入文本后,会消失
输入框中的placeholader和value的区别?
1、placeholader默认颜色是灰色,value默认值是字体颜色
2、当用户输入文本后
placeholder内容会消失
value内容不会消失
required代表必填项,如果提交时,没有进行选取或输入,会提示用户输入内容
密码框提示文字变色
input::-webkit-input-placeholder{
color:rgb(65, 236, 107);
}
<section>
<label for="2">密码</label>
<span>*</span>
<input type="password" id="2" name="pwd" required>
<span>密码强度:</span>
<span>若</span>
<span>中</span>
<span>强</span>
</section>
<section>
<label for="3">确认密码</label>
<span>*</span>
<input type="password" id="3" name="confirm">
<span>请确认密码</span>
</section>
单选框
type的属性值为radio,是实现单选框的样式
name属性值相同,是实现单选框的功能,,,,,,,不加name只有单选框的样式,没有单选框的功能
由于键值是用户选择的,不是用户输入的,
因此,要在input里添加一个value属性名和属性值
单选框默认值的设定
添加checked属性即可
当属性名与属性值相同时,可以只写属性名,依然可达到其效果
性别:
<input type="radio" name="gender" id="nan" value="male" checked="checked">
<label for="nan">男</label>
<input type="radio" name="gender" id="nv" value="female">
<label for="nv">女</label>
多选框
type的属性值为checkbox,是实现单选框的样式
name属性值相同
注:如果是用户输入的值,则只需要给键名即可。
如果是用户选择的,则键名和键值都要给
键名在标签中加,name=""
键值在标签中加,value=""
由于键值是用户选择的,不是用户输入的,
因此,要在input里添加一个value属性名和属性值
<label for="4">爱好:</label>
<input type="checkbox" value="eat" id="4">吃饭
<input type="checkbox" value="sleep" id="4" checked>睡觉
<input type="checkbox" value="playwang" id="4">打王者
下拉列表多选功能
step1:给select一个高度
step2:给select一个multiple
父元素是seleck
子元素是option
name="Province"键名
value="sc"键值
selected设置下拉列表默认值
省份:
<select name="Province">
<option value="">------</option>
<option value="sc">四川省</option>
<option value="jl">吉林省</option>
<option value="sx">陕西省</option>
<option value="cq" selected>重庆省</option>
</select>
城市:
<select name="city">
<option value="">------</option>
<option value="CD">成都</option>
<option value="NC">南充</option>
<option value="DZ">达州</option>
</select>
下拉列表的扩展
optgroup标签给选项进行类别的划分
label上的属性值是类别
label是属性
所属部分:
<select name="Department">
<optgroup label="市场部">
<option value="CD">网络部</option>
<option value="NC">咨询部</option>
<option value="DZ">外推部</option>
</optgroup>
<optgroup label="非市场部">
<option value="CD">教学部</option>
<option value="NC">教质部</option>
<option value="DZ">就业部</option>
</optgroup>
</select>
按钮
input不同type值
type取值:
botton 普通按钮 没有任何功能,JS用的
submit 提交按钮 功能:提交功能
reset 重置按钮 功能:恢复默认值
默认显示提交,如果想修改显示内容,则添加value值
button 为标签时,可以提交<button>注册</button>
为属性时不可以提交
<input type="botton" value="F68">
<input type="submit" value="F68">
<input type="reset">
<section>
请选择您喜欢的颜色
<input type="color">
</section>
<section>
上传文件:
<input type="button" value="上传文件">
<input type="file">
</section>
<section>
出生日期:
<input type="date">
</section>
设置单行文本框输入框的长度 maxlength="11"
纯数字input type="number"
<section>
手机:
<input type="number" maxlength="11" pattern="" required>
</section>
<section>
体重:
<input type="range">
</section>
多行文本输入框
适用场景:留言区,评论区
column 列
row 行
<textarea name="" id="" cols="30" rows="10">
1234456
</textarea>
下拉列表多选功能
input的list值与datalist的id要相同,即关联
datalist是父元素
option子元素
成都小吃:
<input type="text" name="snack" list="F68">
<datalist id="F68">
<option value="凉面">LM</option>
<option value="钵钵鸡">BBJ</option>
<option value="鸡脚">JJ</option>
</datalist>
当input被激活时,轮廓变成原谅色
input:focus{
border:1px solid rgb(37, 37, 235);
}