HTML（五）

最新推荐文章于 2021-06-20 00:52:45 发布

原创最新推荐文章于 2021-06-20 00:52:45 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了HTML表单的各种元素及其用法，包括文本框、密码框、按钮等，并提供了具体的实例代码。

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

1.09 表单的设计

一，表单标记

基本语法：

<form name=" " method=" " action=" " enctype=" " target=" "></form>

name:设置表单名称
method：设置表单发送的方法，可以是"post"或者"get"
action：设置表单处理方式
enctype：设置表单的编码方式
target：设置表单的显示目标

实例代码：
在这里插入图片描述
效果：

二，插入文本框< text>

基本语法：

<form><input name="text" type="text" maxlength=" " size=" " value=" "></form>

实例代码：
在这里插入图片描述
效果：

三，插入密码框< password>

基本语法：

<form><input name="password" type="password" maxlength=" " size=" " ></form>

实例代码：
在这里插入图片描述
效果：

四，插入文本域< file>

基本语法：
在这里插入图片描述
实例代码：

效果：

五，插入标准按钮< botton>

基本语法：

<form><input name="b1" type="button" value="标准按钮"></form>

实例代码：
在这里插入图片描述
效果：

六，插入提交按钮< submit>

基本语法：

<form><input name="submit" type="submit" value="提交"></form>

实例代码：
在这里插入图片描述
效果：

七，插入重置按钮< reset>

基本代码：

<form><input name="reset" type="reset" value="重置"></form>

实例代码：
在这里插入图片描述
效果：

在这里插入图片描述

八，插入单选框< radio>

基本语法：

<form><input name="r1" type="radio"checked value=" "></form>

实例代码：
在这里插入图片描述
效果：

九，插入复选框< checkbox>

基本语法：

<form><input name="r1" type="checkbox" checked value=" "></form>

实例代码：
在这里插入图片描述
效果：

十，插入文字域< textarea>

基本语法：

<form><textarea name="text" rows=" " cols=" " ></textarea>

rows：行数
cols：列数

实例代码：
在这里插入图片描述
效果：

十一，插入下拉列表< select>和列表项< option>

基本语法：
在这里插入图片描述
size：显示的选项数目
multiple：列表中的项目多选

实例代码：

<html>
  <head>
    <title>插入下拉菜单和列表</title>
  <head>
  <body>
<form>
请选择你喜欢的特长<br>
<select  name="特长" size=10 multiple>
<option  value="1">唱歌
<option  value="2">画画
<option  value="3">长跑
<option  value="4">游泳
<option  value="5">体操
<option  value="6">足球
<option  value="7">篮球
<option  value="8">羽毛球
<option  value="9">棒球
</select>
</form>
</body>
</html>

效果：
在这里插入图片描述