• web前端开发基础－－－制作表单类页面

    1. 制作用户登录表单

    例子

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>	
    8. 		<form action="" method="post">
    9. 			<fieldset>
    10. 				<legend>用户登录表单legend>
    11. 				
    12. 				<label>
    13. 					用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
    14. 				label>
    15. 				
    16. 				<label>
    17. 					密码：<input type="password" id="userPassword"/>
    18. 				label>
    19. 				<br /><br />
    20. 				<input type="submit" value="提交" id="submitBtin"/>
    21. 			fieldset>
    22. 		form>
    23. 		
    24. 		<form>
    25. 			<fieldset>
    26. 				<legend>用户登录表单legend>
    27. 				<p>方式一p>
    28. 				<label>
    29. 					用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
    30. 					
    31. 				label>
    32. 				<p>方式二p>
    33. 				<label for="userName">用户名：label>
    34. 				<input type="text" id="userName" placeholder="请输入用户名">
    35. 			fieldset>
    36. 			
    37. 		form>
    38. 		
    39. 		
    40. 		
    41. 	body>
    42. html>

    1. 表单的结构

    标签是所有表单控件的基本容器

                     

                             

                     

    每一个from标签都有一个action属性,其定义了提交数据的URL。

    Method属性，定义了提交表单数据的两种方式get和post

    Get方式：将表单数据以名称/值对的形式附加在action所定义的URL末尾来进行传输，默认情况是采用get方式

    注意：

    Get中URL中的参数是可见的，所以说是不安全的

    URL长度有限的，get方式常用于短表单的数据传递

    Post方式：将表单数据放在HTTP头信息中进行传输。（安全）有以下情景

          用户上传文件时

          表单数据非常长

          包含保密的数据

    3,标签

     用于为input元素定义描述信息，例如表单控件的名称等，还可以扩大表单控件的焦点区域。

    例子：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>	
    8.  
    9. 		
    10. 		<form>
    11. 			<fieldset>
    12. 				<legend>用户登录表单legend>
    13. 				<p>方式一p>
    14. 				<label>
    15. 					用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
    16. 					
    17. 				label>
    18. 				<p>方式二p>
    19. 				<label for="userName">用户名：label>
    20. 				<input type="text" id="userName" placeholder="请输入用户名">
    21. 			fieldset>
    22. 			
    23. 		form>
    24. 		
    25. 		
    26. 		
    27. 	body>
    28. html>

    4，

    和标签（用于将表单控件进行分组）

         

    控件用于在相关表单控件周围绘制边框

          控件用于为这一组表单控件定义标题

    5，input输入控件

    部分属性如下代码示例

    1. 		用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
    2. 		<br/>
    3. 		密码：<input type="text" id="userPassword"/>
    4. 		<br/>
    5. 		<input type="submit" value="提交" name ="submitBtn"/>
    6. 		<br/>
    7. 		<input type="image" src="../img/2ee18-231100-163232346010b0.jpg" width="100px" height="100px"/>

  • 相关阅读:
    职场经验：为什么要学习自动化测试？过来人告诉你答案
    python计算阶层
    Win11未识别的网络无internet怎么办？
    2M大小windows11 改 windows10
    【docker专栏8】使用IDEA远程管理docker镜像及容器服务
    A3纸内容分2页打在A4纸上
    git(部分)
    基于 ACOEGC_T3(PF) 搭建 JLink 调试环境
    算法竞赛进阶指南 基本算法 0x01 位运算
    基于Dockerfile搭建LNMP
  • 原文地址：https://blog.csdn.net/m0_64148419/article/details/133865964