【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）

功能需求

利用bootstrap实现html页面的美化，包括：文本输入框、单选框、多选框、下拉框、按钮相关样式。

技术介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

界面原型

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单练习</title><!-- 引入外部第三方css文件，rel固定值：样式表，href链接地址.min意思最小文件，压缩（把文件所有内容换行和空格缩进都去掉）一行，文件相对比较小120988 英文字格式--><link rel="stylesheet" href="css/bootstrap.min.css" /></head><body><form id="stuForm" method="post" action="http://localhost:8080/stumis/student"><div class="container"><h3>学生信息管理系统mis</h3><div class="form-group"><!-- lable标签 for属性光标定位，点击后可以对应id的框 --><label for="name">姓名：</label><!-- 文本输入框，h5新特性placeholder属性 --><input type="text" name="name" id="name"class="form-control"placeholder="请输入姓名..."/></div><div class="form-group"><label for="age">年龄：</label><input type="number" name="age" id="age"class="form-control"placeholder="请输入年龄..."/></div><div class="form-group"><label for="sex">性别：（单选框）</label><!-- radio互斥，同名会只能选择一个 --> <label class="radio-inline"><input type="radio" name="sex" id="sex" checked="checked" value="1"/> 男</label><label class="radio-inline"><input type="radio" name="sex" id="sex" value="0"/> 女</label></div><div class="form-group"><label for="hobby">爱好：（多选）</label><label class="checkbox-inline"><input type="checkbox" checked="checked" name="hobby" id="hobby" value="1"/> 乒乓球</label><label class="checkbox-inline"><input type="checkbox" name="hobby" id="hobby" value="2"/> 爬山</label><label class="checkbox-inline"><input type="checkbox" name="hobby" id="hobby" value="3"/> 唱歌</label></div><div class="form-group"><label>学历：（下拉框）</label><!-- 单选，选择“幼儿园”，表单提交“1”，性能高--><select name="edu" id="edu"><option value="1">幼儿园</option><option value="2">小学</option><option value="3">初中</option><option value="4">高中</option><option value="5">大专</option><option value="6" selected="selected">本科</option><option value="7">研究生</option><option value="8">博士</option></select></div><div class="form-group"><!-- class属性支持多个样式，样式之间空格隔开 --><input class="btn btn-primary" type="button" id="btnSave" value="保存" onclick="doSubmit()"/><button class="btn btn-danger" id="btnClear">取消</button></div></div></form></body><script>function doSubmit(){var form = document.getElementById('stuForm');form.submit();}</script>
</html>

【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）相关推荐

【小白学前端】JS案例：表单全选取消全选
要求: 1.点击全选按钮,可以选中所有产品前的选择框: 2.再点击一次,取消全选 3.每个产品可以单独选中取消 4.每个产品都选中时,全选框自动选中 5.取消一个产品的选择时,全选框自动取消 HTML ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
请使用recaptcha_如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单
请使用recaptcha by Ondrej Svestka 通过Ondrej Svestka 如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单 (How to bui ...
bootstrap 5 表单验证
bootstrap 5 表单验证写在前面 Bootstrap 是一个功能强大.功能丰富的前端工具包.bootstrap 以其优秀的栅格系统,为网页创作带来的极大的方便.目前版本是5.2 .然而在表单 ...
BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
前端_网页编程 Form表单与模板引擎（下）
目录续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
bootstrap登录表单
介绍: bootstrap登录表单. 注册页面,带空值验证网盘下载地址: http://kekewangLuo.cc/7KKRVJCpNwd0 图片:
添加form表单_Django实战：如何使用djangocrispyforms美化Bootstrap 4表单
这是一个快速教程,可帮助您开始使用django-crispy-forms, 并且永不回头.Django-crispy-forms是一个很棒的第三方包,可让您控制渲染Django表单的方式,而不会破坏默 ...
Bootstrap 自定义表单
一.Bootstrap 自定义表单 1.1 自定义复选框如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox ...

【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）

功能需求

技术介绍

界面原型

代码实现

【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）相关推荐

最新文章

热门文章