• HTML基础学习第五篇（HTML表单与输入）

    一、表单

    表单是一个包含表单元素的区域；

    表单元素是允许用户在表单中输入内容，比如：文本域（lextarea）、下拉列表、

    单选框（radio-buttons）、复选框（checkboxes）等等

    表单使用表单标签:

    来设置：

    imput元素

    二、常见的表单输入元素

    多数情况下使用表单标签是输入标签（）。

    输入类型是由类型属性（type）定义的。常见的输入类型如：

    文本域（Text Fields）

    1、文本域通过标签来定义，当需要在表单中输入字母、数字等内容时，

    就会用到文本域。

    First name:

    Last name:

    2、密码字段

    使用来定义：

    Password:

    3、单选按钮(Radio Buttons)

    使用来定义表单单选按钮：

    男

    女

    4、复选框(Checkbox)

    使用定义复选框，用户可在其中选取一个或多个

    一年级

    二年级

    5、下拉单选列表

    使用

    6、提交按钮（Submit Button）

    定义了提交按钮

    当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接受到的数据进行相关的处理。

    用户名：

    总结以上知识点：实现以下内容

    代码如下 

    1. html>
    2. <html>
    3.      <head>
    4. 	    <meta charset="UTF-8">
    5. 	     <title>
    6. 		    小莫个人信息
    7. 		 title>
    8. 	 head>
    9. 	 <body>
    10. 	    <h1>请输入个人信息h1>
    11. 		<form action="test-6-2.html" method="get">
    12. 		姓名
    13. 		<input type="text" name="name"><br>
    14. 		银行卡密码
    15. 		<input type="password" name="password"><br>
    16. 		性别
    17. 		<input type="radio" name="sex" value="男">男
    18. 		<input type="radio" name="sex" value="女">女
    19. 		<input type="radio" name="sex" value="人妖">人妖<br>
    20. 		是否单身
    21. 		<select name="single">
    22. 		    <option value="">请选择option>
    23. 			<option value="单身">单身option>
    24. 			<option value="不单身">不单身option>
    25. 		select><br>
    26. 		个人爱好
    27. 		<input type="checkbox" name="hobby1" value="唱歌">唱歌
    28. 		<input type="checkbox" name="hobby2" value="看书">看书
    29. 		<input type="checkbox" name="hobby3" value="刷视频">刷视频
    30. 		<input type="checkbox" name="hobby4" value="打游戏">打游戏
    31. 		<input type="checkbox" name="hobby5" value="干饭">干饭<br>
    32. 		
    33. 		<input type="submit" value="提交">
    34. 		form>
    35. 	 body>
    36. html>

  • 相关阅读:
    企业电子招投标系统源码之电子招投标系统建设的重点和未来趋势
    【Linux】线程池
    网页图片加载慢的求解指南
    html5 -- canvas使用(1)
    电动工具行业市场芯片分析
    flutter 书写json解析类
    我把 CPU 三级缓存的秘密，藏在这 8 张图里
    智能终端信息安全概念（四）：硬件安全技术—主芯片安全技术（2）
    云尚办公-0.3.0
    npm package.json
  • 原文地址：https://blog.csdn.net/xiaomoge__/article/details/126845110