【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)

本文链接：https://blog.csdn.net/weixin_43838785/article/details/104662476

本文详细介绍了HTML表单中的各种元素，包括文本框、密码输入框、复选框、单选框、文件上传按钮、下拉菜单、文本域以及提交和重置按钮的功能和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

文本框，password示例
复选框示例
单选框示例
文件提交按钮
标记
标记
提交按钮和重置按钮

HTML表单

文本框，password示例

<form>
<p>请输入姓名：<input type="text" name="Name" size="25"></p>
<input type="password" name="pwd"/>
</form>

在这里插入图片描述

复选框示例

<form>
<head><title>单选框示例</title></head>
<body>
<form action=" ">
<input type="checkbox" name="food" checked="checked">milk<br>
<input type="checkbox" name="food1" >bread<br>
<input type="checkbox" name="food2">eggs<br>
</form>
</body>
</form>

在这里插入图片描述

单选框示例

<form>
<head><title>单选框示例</title></head>
<body>
<p>select grade</p>
<form action=" ">
<input type="radio" name="grade" value="under60" checked="checked">60以下
<input type="radio" name="grade" value="60-80">60-80
<input type="radio" name="grade" value="80-100">80-100
</form>
</body>
</form>

在这里插入图片描述

<form>
<body>
<form>
<input type="file" name="pic" accept="image/gif"/>
</form>
</body>
</form>

文件提交按钮

在这里插入图片描述

标记

<form>
<head><title>菜单实例</title>></head>
<body>
<form action=" ">
<select name="food">
	<option selected="selected">milk</option>
	<option>bread</option>
	<option>eggs</option>
	<option>cheese</option>
</select>
</form>
</body>
</form>

在这里插入图片描述

标记

<form>
<head><title>文本域示例</title></head>
<body><p>请在此留言</p>
<form action=" ">
	<textarea name="message" row="3" col="40"></textarea>
</form>
</body>
</form>

在这里插入图片描述

提交按钮和重置按钮

<form>
<head><title>按钮示例</title></head>
<body>
<form action=" ">
Username:<input type="text" name="username"><br>
Password:<input type="password" name="password"><br>
         <input type="submit" value="sublit">
         <input type="reset" value="reset">
</form>
</body>
</form>