html 表单格式


<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}body{max-width:800px;margin: 10px auto;}form{width:100%;}form fieldset{padding:20px 20px 10px;}form fieldset label{font-weight:bold;line-height:20px;width:100%;}form input,form meter{width:100%;margin:10px 0;display: block;height:30px;border: 1px solid #ccc;padding-left:5px;}form meter{width:100%;border: none;padding-left:0;}.btn{width:100%;height: 40px;margin-top: 20px;}.radioclass{width:20px!important;float:left;}.radiodiv{width:100%;height:45px;line-height:45px;}.fl{float:left;}.ml5{margin-left:5px;}.ml62{margin-left:-62px;}</style></head>
<body>
<form action=""><fieldset><h1>Register Index</h1><legend>Sign Up</legend><label for="userName">Username:</label><input type="text" name="userName" id="userName" placeholder="Please input your username" required><label for="userName">Password:</label><input type="password" name="password" id="password" placeholder="Please input your password" required><label for="userName">Identification:</label><input type="password" name="cpassword" id="cpassword" placeholder="PLease identify your password" required><label for="email">Email：</label><input type="email" name="email" id="email"><label for="phone">Phone Number：</label><input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$"><label for="userImage">Profile：</label><input type="file" Name="Select the file"><label for="sex">Sex/Gender：</label><div class="radiodiv"><input type="radio" class="radioclass" name="sex" value="男"><span class="fl ml5">Male</span><input type="radio" class="radioclass ml5" name="sex" value="女"><span class="fl ml5">Female</span></div><label for="like" class="ml62">Preference/Hobby：</label><div class="radiodiv" style="border:1px red dashed;"><input type="checkbox" class="radioclass" name="like" value="唱歌"><span class="fl ml5">Singing</span><input type="checkbox" class="radioclass ml5" name="like" value="跳舞"><span class="fl ml5">Dancing</span><input type="checkbox" class="radioclass ml5" name="like" value="篮球"><span class="fl ml5">Basketball</span><input type="checkbox" class="radioclass ml5" name="like" value="看书"><span class="fl ml5">Reading</span></div><label for="school" style="margin-left:-200px">Hometown：</label><input type="text" list="school" name="college" id="college" placeholder="Please select"><datalist id="school"><option>HuiBei</option><option>WuHan</option><option>JingZhou</option></datalist><label for="score">Score of Entrance examination to University of China:</label><input type="number" max="100" min="0" step="1" name="score" id="score" value="0"><label for="level">Fundamental Level</label><meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter><label for="inTime">BirthDay</label><input type="date" name="inTime" id="inTime"><label for="leaveTime">Graduation Date</label><input type="date" name="leaveTime" id="leaveTime"><input type="submit" name="submit" id="submit" class="btn"></fieldset>
</form>
<script>document.getElementById("score").oninput=function(){document.getElementById("level").value=this.value;}
</script></body>
</html>

html 插入图片

<div><img src="../photo/construction.jpg" /></div>

注意src格式，相对路径与绝对路径
背景图片另一种写法

<body background="../images/bg.jpg"></body>

以及url版本

<div style="width:宽度值; height:高度值; background:url(图片名称.jpg);"></div>

html 表单格式插入图片相关推荐

表单验证-----验证图片格式
这里写自定义目录标题表单验证-----验证图片格式表单验证-----验证图片格式今天在学习表单验证过程中,又学习了文件类型验证,主要验证文件的格式.大小等属性,方便表单提交. 在使用验证的过程中 ...
利用form表单上传图片，图片保存到本地，得到图片名字（后期可以将图片名字存进数据库）
利用form表单上传图片,图片保存到本地,得到图片名字(后期可以将图片名字存进数据库) html部分:enctype="multipart/form-data" 一定要加! < ...
基于WF4的新平台-表单格式
表单格式目录概述 2 表单映射 3 方式1 3 方式2 3 表单创建 5 主子表单 5 计算字段 6 选项级联填充 7 概述这里所说的表单与数据库 ...
Form表单提交按钮图片IE6下背景透明（js提交）
Form表单提交按钮图片IE6下背景透明(js提交) 我们知道光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...
Android之PC浏览器上传表单格式大文件到手机客户端read函数阻塞问题
1 .问题 PC浏览器上传表单格式大文件到手机服务器端,然后read文件真实数据时候出现阻塞. 比如 User-Agent: PostmanRuntime/7.26.1Accept: */*Cache ...
Android之解决PC端上传http表单格式文件手机解析文件名乱码问题和PC浏览器下载文件的文件名显示乱码问题
1 问题问题1. 手机写socket作为服务器,PC浏览器上传http表单格式文件,然后手机端解析携带中文的文件名我解析是乱码. 问题2. 手机写了socket作为服务器,PC浏览器下载文件,但是浏 ...
android 阻塞式函数,Android之PC浏览器上传表单格式大文件到手机客户端read函数阻塞问题...
1 .问题 PC浏览器上传表单格式大文件到手机服务器端,然后read文件真实数据时候出现阻塞. 比如 User-Agent: PostmanRuntime/7.26.1 Accept: */* Cac ...
form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传
form表单校验复杂系列- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传前言公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提 ...
vue + element-UI 实现图片嵌在表单里，图片和表单一起上传
⭐️个人博客:caohongyuan.com,更多分享,欢迎浏览!⭐️ 如下图,需求要实现点击一个按钮,可以让表单的内容和图片一起上传,只请求后台一次! 思路: 1.让图片formData放在表单fo ...

html 表单格式插入图片

html 表单格式&插入图片

html 表单格式

html 插入图片

html 表单格式插入图片相关推荐

最新文章

热门文章