前端基础--系列一



1、from标签就是作为表单数据的根标签,所有的标签数据都要写在form的里面
<form action="某一个后台程序" method="具体用什么方法">
action属性的值就是要把所有的表单内容,传递给哪一个后台来解决
method代表传输数据时候的方法;get代表明文传送,post代表简单的加密传输

2、type = "text" 代表普通的输入框 placeholder属性中可以设置用户的提醒文字
<input type="text" placeholder="请输入用户名" />

3、密码框 type = "password"
密码框:<input type="password">

4、单选
框 <input type="radio" />
关注点击的时候 是否为单选效果;点击文字也可以实现切换效果,可提升用户体验
name:是实现单选
label中 的for 和input 的id若一致,则可以实现联动效果
性别:<input type="radio" name="xb" id="nan" /><label for="nan">男</label>
<input type="radio" name="xb" id="nv" /><label for="nv">女</label>
<input type="radio" name="xb" id="bm" /><label for="bm">保密</label>
5、复选框 input type="checkbox"
复选框、多选框:可以全部点选,也可以点击一部分;点击文字也可以实现切换效果,可提升用户体验
爱好:<input type="checkbox" id="cf"/><label for="cf">吃饭</label>
<input type="checkbox" id="sj"/><label for="sj">睡觉</label>
<input type="checkbox" id="ddd"/><label for="ddd">打豆豆</label>
6、下拉菜单
<select>
<option value ="">北京</option>
<option value ="">上海</option>
<option value ="">广州</option>
</select>
注意默认选项是否符合要求;总共的下拉可选数也要符合要求

7、文本域
<textarea name="" id="" cols="40" row="30" placeholder="请填写您的意见"></textarea>

<!-- cols和rows分别代表行和列,程序员一般不用这个属性,因为存在兼容性问题,需使用css来解决, 右下角的按钮要关闭,不允许用户自行改变大小-->

8、按钮
普通按钮:<input type="button" value="按钮" />

重置按钮:<input type="reset" value="重置" />
<!-- type='reset' 重置按钮,value属性也要设置,因为如果不设置,浏览器就会自己写入一个默认值,此按钮的效果是点击后重置页面中的表单数据而非清空 -->

提交按钮:<input type="submit" value="提交" />
<!-- 此按钮点击后会把表单中的数据 上传到form标签中的action里面的值所对应的后台程序,value别忘了自己需要设置,否则会有兼容性问题 -->

9、默认选中状态
单选框中的默认选中:
<input type="radio" name="xb" id="nv" checked="checked"/><label for="nv">女</label>
多选框中的默认选中:
<input type="checkbox" id="sj" checked="checked"/><label for="sj">睡觉</label>
下拉框中的默认选中:
<option value ="" selected="selected">上海</option>
#前端#
全部评论
一楼 #测试#
1 回复
分享
发布于 2020-12-08 21:14
你要转战前端吗?
1 回复
分享
发布于 2020-12-08 21:14
阿里巴巴
校招火热招聘中
官网直投
牛逼
1 回复
分享
发布于 2020-12-08 21:59

相关推荐

3 2 评论
分享
牛客网
牛客企业服务