__x__(45)0910第六天__各种表单

2024-03-17 13:30
文章标签 表单 45 第六天 0910

本文主要是介绍__x__(45)0910第六天__各种表单,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图:

 


 

html代码:

<!doctype html>
<html><head><meta charset="utf-8" /><title>表格</title><link rel="stylesheet" type="text/css" href="css/form.css" /></head><body>Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form 是<b>块元素</b>,独占一行。<div ><form action="deal.html" id="userregist" ><!-- 表单项分组fieldset --><!-- legend子标签,设置组名,并显示在页面上。 --><!-- 服务器要求使用。 --><fieldset><legend>用户账号密码</legend><!-- 标签框 label    拥有一个for属性,指定一个表单项的id --><label for="regname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><!-- 文本框 text --><input type="text" id="regname" name="username" value="" /><br /><br /><!-- 密码框 password -->请设置密码:<input type="password" name="userpassword1" value=""/><br /><br />再输入密码:<input type="password" name="userpassword2" value=""/><br /></fieldset><br /><!-- 单选按钮 radio    name相同的按钮是为一组,    最好设置value --><!-- 设置默认选项:checked="checked" -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:<input type="radio" name="usersex" value="boy" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="usersex" value="girl" checked="checked"/><br /><br /><!-- 多选按钮 checkbox --><!-- 设置默认选项:checked="checked" -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;果:<input type="checkbox" name="userfood" value="boy" />苹果<input type="checkbox" name="userfood" value="pear" checked="checked" /><input type="checkbox" name="userfood" value="girl" checked="checked" />香蕉<br /><br /><!-- 下拉列表 select    使用 option 设置选项    name指定给select    value 指定给 option --><!-- 设置默认选项:selected="selected" -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:<select name="userhome"><option value="hn">北京</option><option value="gd">上海</option><option value="cs">长沙</option><option value="sz">深圳</option><option value="zjj" selected="selected">张家界</option></select><br /><br /><!-- 多选下拉列表:multiple="multiple" -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好:<select name="userhobby" multiple="multiple"><option value="draw" selected="selected">画画</option><option value="swim">游泳</option><option value="run">跑步</option><option value="sleep" selected="selected">睡觉</option></select><br /><br /><!-- 多选下拉列表选项分组 -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像:<select name="userstar" multiple="multiple"><optgroup><option value="JM" selected="selected">约瑟夫 摩根</option><option value="CL">成龙</option><option value="WJ">吴京</option></optgroup><optgroup><option value="ZLY" >赵丽颖</option><option value="LYF" selected="selected">刘亦菲</option></optgroup></select><br /><br /><!-- 文本域 textarea -->自我简介:<textarea name="userword"></textarea><br /><input type="reset" value="重新填写" id="resetuser" /><input type="submit" value="马上注册" id="submituser" /><!-- 创建一个单纯的按钮,没有任何功能,只能被点击。 --><!-- 结合JS实现无限功能。 --><input type="button" value="已有账号,现在登录"/><br /><!-- 以下按钮更加灵活,成对出现,可以在中间设置<img > --><button type="reset">重新填写</button><button type="submit">马上注册</button><button type="button">已有账号,现在登录</button><br /></form></div></body>
</html>

 


 

css代码:

@charset "utf-8";*{margin: 0px;padding: 0px;
}.clearfix {zoom:1;
}.clearfix:before,
.clearfix:after {content:"";display: table;clear: both;
}body{background-color: #3e4e54;
}#userregist{width: 500px;margin: 0px auto;
}

 


 

转载于:https://www.cnblogs.com/tianxiaxuange/p/9619793.html

这篇关于__x__(45)0910第六天__各种表单的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/819100

相关文章

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from 'vue';import App from './App.vue';import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上Vue.prototype.$downloadTokenF

Java基础回顾系列-第六天-Java集合

Java基础回顾系列-第六天-Java集合 集合概述数组的弊端集合框架的优点Java集合关系图集合框架体系图java.util.Collection接口 List集合java.util.List接口java.util.ArrayListjava.util.LinkedListjava.util.Vector Set集合java.util.Set接口java.util.HashSetjava

react笔记 8-21 约束性 表单

1、约束性组件和非约束性组件 非约束性组件<input type="text" name="" defaultValue={this.state.msg}></input>这里他的value是用户输入的值 并没有执行操作 只是获取到了msg的值 用户输入不会改变数据非约束性组件需要使用defaultValue获取数据 否则会报错约束性组件<input type="text

vue2实践:第一个非正规的自定义组件-动态表单对话框

前言 vue一个很重要的概念就是组件,作为一个没有经历过前几代前端开发的我来说,不太能理解它所带来的“进步”,但是,将它与后端c++、java类比,我感觉,组件就像是这些语言中的类和对象的概念,通过封装好的组件(类),可以通过挂载的方式,非常方便的调用其提供的功能,而不必重新写一遍实现逻辑。 我们常用的element UI就是由饿了么所提供的组件库,但是在项目开发中,我们可能还需要额外地定义一

js操作Dom节点拼接表单及ajax提交表单

有时候我们不希望html(jsp、vm)中有创建太多的标签(dom节点),所以这些任务都由js来做,下面提供套完整的表单提交流程,只需要在html中添加两个div其余的都由js来做吧。下面原生代码只需略微修改就能达到你想要的效果。 1、需要创建表单的点击事件 <a href="javascript:void(0);"onclick="changeSettleMoney('$!doctor.do

JSP 简单表单显示例子

<html><!--http://localhost:8080/test_jsp/input.html --><head><meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"><title>input页面</title></head><body><form action="input.jsp" method

在幼儿园管理系统中,会议管理申请会议模块:添加会议记录(提交表单)的时候报:404错误!

在幼儿园管理系统(spring MVC)中,会议管理>申请会议模块:添加会议记录的时候报:404错误!不知道为啥找不到,一开始感觉一头雾水,怎么会出现404页面找不到错误那,又检查action,controller等这也没错啊!怎么出现404错误那。经过询问和查找,终于找到原因了。 原因是:添加的有时间字段。 代码: @InitBinder public void in