分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

html基础4-表单/下拉列表

发布时间:2023-09-06 02:05责任编辑:林大明关键词:暂无标签

最常见的就是 注册/登陆页面,就是一个表单

主要用于收集用户信息,和服务器交互

input标签,和所有输入相关的都是input,单标记

账号密码输入框,按钮,单选,复选

输入型:text/password

按钮型:submit reset button(配合js自定义使用)

起的是按钮的作用

 能看到,submit按钮内置了提交功能,用的是get方法

<body> ???<h1 align="center">注册信息</h1> ???<form> ???????<!-- 使用table来排版 --> ???????<!-- 姓名:<input type="text" name=""> --> ???????<table align="center"> ???????????????????????<!-- 文本框 --> ???????????<tr> ???????????????<td>姓名:</td> ???????????????<td><input type="text" name="username" placeholder="请输入用户名"></td> ???????????</tr> ???????????<tr> ???????????????<td>邮箱:</td> ???????????????<td><input type="text" name="email" value="@qq.com" ></td> ???????????</tr> ???????????<!-- 密码框 --> ???????????<tr> ???????????????<td>密码:</td> ???????????????<td><input type="password" name="password" placeholder="请输入密码"></td> ???????????</tr> ???????????<tr> ???????????????<td>确认密码:</td> ???????????????<td><input type="password2" name="password2" placeholder="请再次输入密码"></td> ???????????</tr> ???????????<!-- 文件域 --> ???????????<tr> ???????????????<td>上传照片:</td> ???????????????<td><input type="file" name="file"></td> ???????????</tr> ???????????<!-- 单选 --> ???????????<tr> ???????????????<td>性别:</td> ???????????????<td> ???????????????????<!-- 被选择的单选框,value值会传送的服务器上,所以value是唯一区分 --> ???????????????????<!-- 同一个类型的单选框,name要一致 --> ???????????????????男<input type="radio" name="sex" value="man"> ???????????????????女<input type="radio" name="sex" value="woman"> ???????????????</td> ???????????</tr> ???????????<!-- 复选 --> ???????????<tr> ???????????????<td>爱好:</td> ???????????????<td> ???????????????????<!-- 选择的话会传相应的value值,因为是复选,同一类型下name基本没有区分的用 --> ???????????????????<!-- name是用于不同类型的复选之间的区分的 比如爱好/运动 --> ???????????????????阅读<input type="checkbox" name="" value="read"> ???????????????????跳舞<input type="checkbox" name="" value="dance"> ???????????????????唱歌<input type="checkbox" name="" value="sing"> ???????????????</td> ???????????</tr> ???????????<!-- 按钮 --> ???????????<tr> ???????????????<td>操作:</td> ???????????????<td> ???????????????????<!-- value是显示的内容 --> ???????????????????<input type="button" name="" value="点我"> ???????????????????<input type="submit" name=""> ???????????????????<input type="reset" name=""> ???????????????</td> ???????????</tr> ???????</table> ???</form></body>

用来代替单选和复选框

<select> ???????????????????????<option value="cd">成都</option> ???????????????????????<option value="bj">北京</option> ???????????????????????<option value="nj">南京</option> ???????????????????????<option value="hz">杭州</option> ???????????????????</select>

分组的下拉菜单

<select name="city"> ???????????????????????<!-- value才是传到服务器的,label只是展示 --> ???????????????????????<optgroup label="江浙沪"> ???????????????????????????<option value="nj">南京</option> ???????????????????????????<option value="hz">杭州</option> ???????????????????????????<option value="sh">上海</option> ???????????????????????</optgroup> ???????????????????????<optgroup label="川渝"> ???????????????????????????<option value="cd">成都</option> ???????????????????????????<option value="cq">重庆</option> ???????????????????????</optgroup> ???????????????????</select>

多行文本域

<tr> ???????????????<td>简介:</td> ???????????????<td><textarea placeholder="请输入个人信息"></textarea></td> ???????????</tr>

以后估计会使用AJAX来传,这种方式过时了吧

html基础4-表单/下拉列表

原文地址:https://www.cnblogs.com/weizhibin1996/p/9350069.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved