Web前端Html的表单

表单的关键字:

form标签表示一个表单区域

action="后端地址"

method="提交数据方式:get/post"

input 单行输入框

type="text" 文本

name="定义名称 名字自定义" 向后端提交的键

readonly="readonly" 只读,不可修改,但是可以提交

disabled="disabled" 禁用组件不可修改,不能提交

type="password" 密码框

type="radio" 单选框

html 复制代码
<body>
			<form  method="get" >
				<p align="center" class="c1">欢迎注册</p>
			<table align="center">
				<tr>
					<td align="right" class="c2">用户名:</td>
					<td><input type="text" name="account"/></td>
				</tr>
				<tr>
					<td align="right" class="c2">密码:</td>
					<td><input type="password" name="password"/></td>
				</tr>
				<tr>
					<td align="right" class="c2">
						性别:
					</td>
					<td><input type="radio" name="gender" value="男"/>男
					<input type="radio" name="gender" value="女"> 女</td>
				</tr>

checkbox 多选

cols列 rows行

type="flie" 文件选择框

type="submit" 提交按钮 触发表单的提交动作

type="reset" 重置按钮

type="button" 普通按钮 onclick相当于监听按下动作后执行""中的东西11111x

html 复制代码
<tr>
					<td align="right" class="c2">电话:</td>
					<td><input type="phonenum" name="phonenum"/></td>
				</tr>
				<tr>
					<td align="right" class="c2">
						职业:
					</td>
					<td>
					<select name="job">
					<option value="100">学生</option>
					<option value="100">老师</option>
					<option value="100">其他职业</option>
					</select>
					</td>
				</tr>
				<tr>
					<td align="right" class="c2">
					爱好:
					</td>
					<td>
						<input type="checkbox" name="hobby" >敲代码
						<input type="checkbox" name="hobby" > 打游戏
						<input type="checkbox" name="hobby"> 唱歌
						<input type="checkbox" name="hobby"> 运动
					</td>
				</tr>
				<tr>
					<td align="right" class="c2">
						地址:			
						</td>
						<td>
							<textarea name="address"  rows="2"></textarea>
            	</td>
				</tr>
			</table>
			<p align="center" class="c1">填写完成后点击下面提交按钮提交表单</p>
			<p align="center">
			<input type="submit" vaule="提交"/>
			<input type="reset" value="重置"/>
			</p>
			</form>
		
相关推荐
AI浩7 小时前
【Labelme数据操作】LabelMe标注批量复制工具 - 完整教程
运维·服务器·前端
涔溪7 小时前
CSS 网格布局(Grid Layout)核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
前端·css
2401_878454537 小时前
浏览器工作原理
前端·javascript
西陵7 小时前
为什么说 AI 赋能前端开发,已经不是选择题,而是必然趋势?
前端·架构·ai编程
by__csdn8 小时前
Vue3 setup()函数终极攻略:从入门到精通
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
天天扭码9 小时前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
Luna-player9 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu05199 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys9 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选9 小时前
GELab-Zero 技术解析:当豆包联手中兴,开源界如何守住端侧 AI 的“最后防线”?
前端·aigc