本文详细介绍了HTML表单的各种元素及其用法，包括文本输入、密码输入、电子邮件输入等，并展示了如何使用这些元素创建完整的用户注册表单。
一、form元素使用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta >
<title>Title</title>
<style type="text/css">
body{
position: relative;
top: 20px;
left: 360px;
overflow: auto;
}
fieldset{
width: 480px;
height: 680px;
}
#image{
width: 20px;
height: 20px;
}
#cz{
position: relative;
left: 150px;
bottom: -20px;
}
#submit{
position: relative;
left:200px;
bottom: -20px;
}
</style>
</head>
<!--
required必填
value默认值
autofocus自动获得焦点
autocomplete开启/关闭浏览器的记忆功能
placeholder获得焦点输入后清除默认值
tabindex设置tab键的顺序
optgroup对option进行分组
novalidate 属性提交时不校验，没有该属性时，email,required均会进行校验
-->
<body>
<form action="" method="get" id="biaodan" novalidate="novalidate" autocomplete="off" >
<fieldset>
<legend>用户注册</legend>
<label for="username">学号：</label><input type="text" id="username" maxlength="6" name="user"value="" placeholder="请输入用户名" autofocus="" >
<label for="search"> <input type="submit" value="搜索"></label> <input type="search" id="search" placeholder="请输入关键词">
<br>
<label for="passwordid">密码：</label><input type="password" name="password" value=""id="passwordid" ><br>
<label for="emailid">邮箱：</label><input type="email" value="" name="email" id="emailid" placeholder="请输入邮箱"><br>
<label for="tel">电话：</label><input type="tel" id="tel"><br>
<label for="url">网址：</label><input type="url" id="url"><br>
<label for="adress">地址：</label><input type="text" value="XX市XX县" disabled="disabled" id="adress"><br>
<!--图片按钮：<a href="http://www.baidu.com"><input type="image" src="sp/sp4.png" id="image"></a> <br>-->
<label for="where">籍贯：</label><input type="text" value="中国" readonly="" id="where"><br>
<label for="beizhu">备注：</label><input type="text" required="required" id="beizhu" name="required"><br>
<label for="num">选课数：</label><input type="number" id="num" min="1" max="10" value="5" required="required" tabindex="4"><br>
<label for="qz">权重：</label><input id="qz" type="range" min="1" max="10" value="5"><br>
<label for="date">生日：</label><input type="date" id="date"><label for="time"></label><input id="time" type="time"><br>
<label for="sex">性别:</label> <input type="radio" id="sex" name="radio" value="1" checked="checked">男
<input type="radio" name="radio" value="2">女<br>
<label for="intres">兴趣：</label> <input type="checkbox" name="checkbox" value="1" id="intres">Python
<input type="checkbox" name="checkbox" value="2">Java
<input type="checkbox" name="checkbox" value="3">C<br>
<h3>请选择院系</h3>
<input type="text" name="dd" list="da" placeholder="请输入专业" ><!-- list的值需与datalist的id一致-->
<datalist id="da">
<option>计算机系</option>
<option>体育系</option>
<option>艺术系</option>
<option>数学系</option>
</datalist><br>
<h3>请选择专业</h3>
<select size="5" multiple="multiple" name="zy" ><!--multiple多选,optgroup对option进行分组-->
<optgroup label="艺术">
<option value="1">绘画</option>
<option value="2">雕刻</option>
<option value="3">设计</option>
<option value="4">书法</option>
</optgroup>
<optgroup label="计算机">
<option value="5">数据库</option>
<option value="6">编程</option>
<option value="7">前端</option>
<option value="8">服务器</option>
</optgroup>
<optgroup label="体育">
<option value="9">长跑</option>
<option value="10">篮球</option>
<option value="11">足球</option>
<option value="12">乒乓球</option>
</optgroup>
</select><br>
<!-- accept属性设定上传可以接收的文件类型-->
<label for="upload">上传证件：</label><input type="file" id="upload" accept="image/jpg" multiple="multiple"> <input type="submit" value="上传" name="overload" ><br>
<input type="reset" value="重置" id="cz"><input type="submit" value="提交" id="submit"></p>
</fieldset>
</form>
<label for="date-local">date-local使用效果</label><input type="datetime-local" id="date-local"><br>
<label for="week">week使用效果</label><input type="week" id="week"><br>
<label for="month">month使用效果</label><input id="month" type="month"><br>
<label for="color">color使用效果</label><input type="color" id="color"><br>
<label for="user1">将表单外的元素跟表单进行关联</label> <input type="text" name="user1" form="biaodan" id="user1"><!-- form属性关联form元素的id，将表单外的数据与表单进行关联-->
</body>
</html>
二、效果展示
扫一扫
4819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
