HTML表单（form、input、select、textarea标签）

最新推荐文章于 2024-07-29 09:25:14 发布

「已注销」

最新推荐文章于 2024-07-29 09:25:14 发布

阅读量5.3k

点赞数 2

分类专栏：前端基础入门 html/html5 文章标签： html

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88535311

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html/html5

7 篇文章 1 订阅

订阅专栏

*HTML表单

*<input>标签

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础表单</title>
</head>
<body>

  <form>
    <!--单行文本域：type值为text-->
  	姓名：<input type="text" name="username"/>

    <!--密码框：type值为password-->
  	密码：<input type="password" name="paw"/>

    <!--文件域：type值为file，不同浏览器外观显示不同，不受我们控制-->
    上传文件：<input type="file" name="file"/>

    <!--单选框：type值为radio，同一组(只能选一个)的name相同，当提交时，上传被选中的value值-->
    男：<input type="radio" name="sex" value="man" checked />
    女：<input type="radio" name="sex" value="woman" />

    <!--复选框：type值为checkbox，当出现两组多选时通过name值判断，当提交时上传被选中的value值-->
    读书：<input type="checkbox" name="dx1" value="red" checked />
    跳舞：<input type="checkbox" name="dx2" value="dance" />
    跑步：<input type="checkbox" name="dx3" value="run" />

    <!--按钮，value值可以修改按钮上显示的文字-->
    <input type="button" name="..." value="..." />
    <input type="submit" name="..." value="..." />
    <input type="reset" name="..." value="..." />

    <!-- 图像域（图像提交按钮）-->
    <input type="image" name="image_but" src="imageUrl" />

    <!-- 隐藏域：当部分信息不希望让用户看到，但是又需要传给服务器-->
    <input type="hidden" name="..." value="..." />

  </form>
    	
</body>
</html>

*下拉菜单/列表（<select>\<option>）标签

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>表单select</title>
</head>
<body>
    <form>
        <!--下拉菜单select：value值是提交表单是传给服务器的值-->
        <select name="city">
       	   <option value="xz">--请选择--</option>
       	   <option value="bj" selected>北京</option>
       	   <option value="tj">天津</option>
       	   <option value="hb">河北</option>
       	   <option value="sh">上海</option>
       	   <option value="fj">福建</option>
       	   <option value="xm">厦门</option>
        </select>
    </form>
</body>
</html>

*多行文本<textarea> 标签

【注意】：提交表单数据后，以什么样形式发送给服务端呢？服务端又以什么方式处理呢？？？

详情参考《表格资料》

「已注销」

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
HTML表单（form、input、select、textarea标签）

目录HTML表单下拉菜单/列表***HTML表单*****<input>标签**<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g...
复制链接

扫一扫