文章目录

1. 表单
- 1.1 作用
- 1.2 组成
- 1.3 表单域
- 1.4 表单元素 <**input**>
- - 1.4.1 作用
  - 1.4.2 语法
  - 1.4.3 type属性
  - 1.4.4 type="text" 和 type="password"
  - 1.4.5 type="radio" 和 type="checkbox"
  - 1.4.6 type="submit" 和 type="reset"
  - 1.4.7 type="button" 和 type="file"
  - 1.4.8 除type外的其他属性
2. label 标签
- 2.1 定义
- 2.2 语法
3. select标签
- 3.1 定义
- 3.2 语法
4. textarea标签
- 4.1 定义
- 4.2 语法
5. 表单综合案例
- 5.1 要求
- 5.2 分析
- 5.3 代码

1. 表单

1.1 作用

表单的主要作用是：收集用户的信息

1.2 组成

一个完整的表单由三部分组成：

表单域（整个表单的领域）
提示信息（无实质作用，只用于提示控件的填写或选择）
表单控件（也叫表单元素，可以选或填信息）

1.3 表单域

<form> 标签用于定义表单域，它会把范围里的表单元素提交给服务器

语法：

<form action="url" method="提交方式" name="表单域的名称">表单控件
</form>

常用属性：

属性	属性值	作用
action	url	指定接受处理表单的服务器的地址
method	get/post	指定表单的提交方式
name	str	给表单域命名，以区分同一页面的不同的表单域

1.4 表单元素 <input>

1.4.1 作用

input 的意思是输入，主要用于收集用户信息

1.4.2 语法

<input type="属性值">

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.4.5 type=“radio” 和 type=“checkbox”

性别：<input type="radio">男 <input type="radio">女 <br/>
爱好：<input type="checkbox"> 游泳 <input type="checkbox"> 蓝球 <input type="checkbox"> 跑步<br/>

感觉好像没问题，但实际操作中发现单选无法单选！！！

解决：单选按钮相同 name 互斥【这里后面会更详细介绍】

性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br/>

1.4.6 type=“submit” 和 type=“reset”

<input type="submit">
<input type="reset">

但这样未免太过单调，我们通过value 属性换下里面的文字

<input type="submit" value="我要提交">
<input type="reset" value="我要重填">

1.4.7 type=“button” 和 type=“file”

<input type="button" value="我是一个平平无奇的按钮"><br/><br/>
上传文件<input type="file">

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/>

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="男">

<lable> 中的 for 属性应与表单元素的id属性值相同。

3. select标签

3.1 定义

有时，如果选项很多（比如省市这类的选项选择），我们如果用单选按钮或者复选框是很浪费空间的，而且也不美观，想想看一堆密密麻麻的按钮，体验多差呀！

3.2 语法

<select><option value="选项一">选项一</option><option value="选项二">选项二</option><option value="选项三">选项三</option>
</select>

注意点：

<select> 标签里面至少得包含一个 <option>
如果定义 selected=“selected” 时，可以在打开页面就默认选中项，类似 checked 属性。

4. textarea标签

4.1 定义

当文本过多时 <input> 标签的 text 控件是不够用的，所以就有了多行文本输入的 textarea 标签，常用于留言板和评论。

4.2 语法

<textarea  cols="30" rows="10">文本内容
</textarea>

以上两个属性 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">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option></select><select name="birth_month" id="birth_month"><option>--请选择月份--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><select name="birth_day" id="birth_day"><option>--请选择日--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></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>

本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流

【攻破html系列——第六天】表单元素相关推荐

BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
js系列教程9-表单元素全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
[React 基础系列] 受控表单 vs 不受控表单
[React 基础系列] 受控表单 vs 不受控表单受控表单 refs 不受控表单不受控组件总结之前的学习部分带了一些表单内容的使用--之前的案例基本上是用的都是 input,接下来就学习一下 ...
HTML进阶（3）- 表单元素
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录表单元素 input元素 select元素 textarea元素按钮元素表单状态配合 ...
HTML基础--表单元素知识
学习目标: 通过简单的实践,学习基本的 HTML FORM 标签,理解各种表单元素的使用场景,并且掌握表单一系列基本验证方式. 学习内容: 1.HTML表单 HTML 表单用于搜集不同类型的用户输入. ...
html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
【2018-01-22】HTML-表单及表单元素
<body><form action="" method="post">& ...
5 select 选择的值_表单元素之选择类型
表单元素的选择类型可以分为三种: 单选多选下拉单选和复选框的属性值可以有两个:disabled(不可操作的) 和 checked. 下拉框的属性值可以是:selected(默认选中) .mult ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...

【攻破html系列——第六天】表单元素