-
html之表单元素
1. 表单
1.1 作用
表单的主要作用是：收集用户的信息
1.2 组成
一个完整的表单由三部分组成：
-
表单域（整个表单的领域）
-
提示信息（无实质作用，只用于提示控件的填写或选择）
-
表单控件（也叫表单元素，可以选或填信息）
1.3 表单域
<form> 标签用于定义表单域，它会把范围里的表单元素提交给服务器
语法：
<form action="url" method="提交方式" name="表单域的名称"> 表单控件 form>- 1
- 2
- 3
常用属性：
属性 属性值 作用 action url 指定接受处理表单的服务器的地址 method get/post 指定表单的提交方式 name str 给表单域命名，以区分同一页面的不同的表单域
1.4 表单元素 <input>
1.4.1 作用
input 的意思是输入，主要用于收集用户信息
1.4.2 语法
<input type="属性值">- 1
1.4.3 type属性
值 描述 button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 checkbox 定义复选框。 file 定义输入字段和 "浏览"按钮，供文件上传。 hidden 定义隐藏的输入字段。 image 定义图像形式的提交按钮。 password 定义密码字段。该字段中的字符被掩码。 radio 定义单选按钮。 reset 定义重置按钮。重置按钮会清除表单中的所有数据。 submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
1.4.4 type=“text” 和 type=“password”
账号：<input type="text"><br/> 密码：<input type="password"><br/>- 1
- 2
1.4.5 type=“radio” 和 type=“checkbox”
性别：<input type="radio">男 <input type="radio">女 <br/> 爱好：<input type="checkbox"> 游泳 <input type="checkbox"> 蓝球 <input type="checkbox"> 跑步<br/>- 1
- 2
感觉好像没问题，但实际操作中发现单选无法单选！！！
解决：单选按钮相同 name 互斥【这里后面会更详细介绍】
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br/>- 1
1.4.6 type=“submit” 和 type=“reset”
<input type="submit"> <input type="reset">- 1
- 2
但这样未免太过单调，我们通过value 属性换下里面的文字
<input type="submit" value="我要提交"> <input type="reset" value="我要重填">- 1
- 2
1.4.7 type=“button” 和 type=“file”
<input type="button" value="我是一个平平无奇的按钮"><br/><br/> 上传文件<input type="file">- 1
- 2
1.4.8 除type外的其他属性
属性 属性值 描述 name str 定义input元素的名 value str 定义input元素的值 checked checked 规定某个input元素首次加载应该被选中 maxlength number 规定输入字段中字符的最大长度 - name 和 value 是每个表单元素都有的属性，主要给后台人员使用，所以一般都会设置。
- name 是表单元素的名字，要求同一类的单选按钮和复选框都使用同样的 name（为了区别和其他类的区别）。
- checked 主要用于单选按钮和复选框，主要用于一打开界面，这些按钮可以默认选中，可提高用户体验。
- maxlength 属性较少用，之后一般会用正则表达式限制。
- checked属性
性别：<input type="radio" name="sex" >男 <input type="radio" name="sex" checked="checked">女 <br/> 爱好：<input type="checkbox"> 游泳 <input type="checkbox" checked="checked"> 蓝球 <input type="checkbox"> 跑步<br/>- 1
- 2
-
key 和 value 属性
一般所有表单元素我们都会设置 name，让后台人员使用，而 value 是表单的值。
我们如果 type=“text”，类似这样的输入，输了什么它的 value 就是什么。
但像单选按钮和复选框这种，控件本身和提示文字是没有任何联系，通过 value 值可以让我们更加明确我们选了什么。
2. label 标签
2.1 定义
例如单选按钮、复选框等控件，他们很小，我们点的时候可能不太好点。所有我们会想要通过点击他们的提示文字，做到点击他们旁边的控件的效果。
所以我们引入了 <label> 标签让控件和其提示文字绑定。
2.2 语法
<label for="man">男label> <input type="radio" id="man" name="sex" value="男">- 1
- 2
- 3
<lable> 中的 for 属性应与表单元素的id属性值相同。
3. select标签
3.1 定义
有时，如果选项很多（比如省市这类的选项选择），我们如果用单选按钮或者复选框是很浪费空间的，而且也不美观，想想看一堆密密麻麻的按钮，体验多差呀！
3.2 语法
<select> <option value="选项一">选项一option> <option value="选项二">选项二option> <option value="选项三">选项三option> select>- 1
- 2
- 3
- 4
- 5
注意点：
- <select> 标签里面至少得包含一个 <option>
- 如果定义 selected=“selected” 时，可以在打开页面就默认选中项，类似 checked 属性。
4. textarea标签
4.1 定义
当文本过多时 <input> 标签的 text 控件是不够用的，所以就有了多行文本输入的 textarea 标签，常用于留言板和评论。
4.2 语法
<textarea cols="30" rows="10"> 文本内容 textarea>- 1
- 2
- 3
以上两个属性 cols 和 rows 实际开发不会用，一般都用 css 来改变大小。
5. 表单综合案例
5.1 要求
完成以下页面：
5.2 分析
5.3 代码
正常来说，应该用 <form></form> 包含 <table></table>，但是这里没有使用，因为和我认为的表单域不太一样，而且我们一般也不用表格布局，这里只是为了熟悉表格操作。
<body> <h4>青春不常在，抓紧谈恋爱h4> <table width = "600"> <tr> <td>性别:td> <td> <input type="radio" id="man" name="sex" value="男"> <label for="man"><img src="./img/man.jpg"> 男label> <input type="radio" id="woman" name="sex" value="女"> <label for="woman"><img src="./img/women.jpg"> 女label> td> tr> <tr> <td>生日:td> <td> <select name="birth_year" id="birth_year"> <option>--请选择年份--option> <option value="2000">2000option> <option value="2001">2001option> <option value="2002">2002option> <option value="2003">2003option> select> <select name="birth_month" id="birth_month"> <option>--请选择月份--option> <option value="1">1option> <option value="2">2option> <option value="3">3option> <option value="4">4option> select> <select name="birth_day" id="birth_day"> <option>--请选择日--option> <option value="1">1option> <option value="2">2option> <option value="3">3option> <option value="4">4option> select> td> tr> <tr> <td>所在地区:td> <td><input type="text" name="area" value="北京思密达">td> tr> <tr> <td>婚姻状况:td> <td> <input type="radio" name="marry" id="unmarried" value="unmarried"> <label for="unmarried">未婚label> <input type="radio" name="marry" id="married" value="married"> <label for="married">已婚label> <input type="radio" name="marry" id="divorce" value="divorce"> <label for="divorce">离婚label> td> tr> <tr> <td>学历:td> <td><input type="text" name="area" value="博士后">td> tr> <tr> <td>喜欢的类型:td> <td> <input type="checkbox" name="like" id="wumei" value="wumei"> <label for="wumei">妩媚的label> <input type="checkbox" name="like" id="keai" value="keai"> <label for="keai">可爱的label> <input type="checkbox" name="like" id="xianrou" value="xianrou"> <label for="xianrou">小鲜肉label> <input type="checkbox" name="like" id="larou" value="larou"> <label for="larou">老腊肉label> <input type="checkbox" name="like" id="all_link" value="all_link"> <label for="all_link">都喜欢label> td> tr> <tr> <td>个人介绍:td> <td> <textarea name="personal_introduction" cols="20" rows="2">个人简介textarea> td> tr> <tr> <td>td> <td> <input type="button" name="zhuche" value="免费注册"> td> tr> <tr> <td>td> <td> <input type="checkbox" checked="checked" id="agree"><label for="agree"> 我同意注册条款和会员加入标准label> td> tr> <tr> <td>td> <td> <a href="#">我是会员，立即登录a> td> tr> <tr> <td>td> <td> <h5>我承诺h5> <ul> <li>年满18岁、单身li> <li>抱着严肃的态度li> <li>真诚寻找另一半li> ul> td> tr> table> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
本文主要学习黑马程序员pink老师的视频
如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ
-
-
相关阅读:
在Flask中使用Jinjia2
第24篇 数据库（四）SQL查询模型QSqlQueryModel
Nastran的应变方向
重要统计公式及概率分布图
【漏洞复现】SpringBlade dict-biz SQL注入漏洞
【数学建模】钻井问题
51单片机FM调频收音机可存台音量可调TEA5767 STM32
cleanmymacX4.14免费版mac清除浏览器缓存软件
Spring Bean的作用域
git基础命令
- 原文地址：https://blog.csdn.net/m0_51302822/article/details/127586605
