笔记 - 8、HTML - 表单

简介: HTML·表单:在html中,表单常用来提交用户在页面中输入的数据。(******) 代码:在html中使用表单,需要用到<form></form> 标记 form必不可少的属性:     action:该表单提交到的一个地址(程序)。后台做的,前端仅作了解。     method:表单的提交方式:         delete: 不做了解。      
HTML·表单:在html中,表单常用来提交用户在页面中输入的数据。(******)

代码:在html中使用表单,需要用到<form></form> 标记
form必不可少的属性:
    action:该表单提交到的一个地址(程序)。后台做的,前端仅作了解。
    method:表单的提交方式:
        delete: 不做了解。
        put:不做了解。
        get:使用get方式提交数据,表单中的数据会直接显示在浏览器的地址栏处,这回导致信息安全隐患。一般表单不会用get方式提交数据。
        post:表单中的数据被包含在表单的主体中,不会直接显示在浏览器地址栏中,信息相对安全,然后被送到处理程序上。

form的其他属性:
    name:表单的名称,不是表单的必要属性,但是为了防止表单提交到后台处理程序时出现换乱,一般给表单命名(添加name属性)。
    enctype:表单的编码方式
        application/x-www-form-urlencoded:默认的编码方式。
        multipart/form-data:MIME编码,上传文件表单必须将enctype属性值设置为它。
    target:目标显示方式
        与超链接的target属性作用相同。

=======    表单对象(输入框之类的元素)=========
网页中的表单有许多不同的表单元素组成。这些元素包括文字字段,单选按钮,复选框,菜单和列表以及按钮等。

1.文字字段text(一个普通的单行文本输入框)(************)
    <input type="text" />
    属性:
        type:用来指定该元素是那种表单元素。
        name:文字字段的名称,用于和页面中其他控件加以区别,不能为中文,并且有大小写之分。做后台必不可少的一个属性,没有该属性,那么后台将取不到该元素的值。
        value:用来定义文本框的默认值。
        size:用来设置文本框显示长度。
        maxlength:用来设置文本框中最多可以输入多少个字符。
2.密码域(password,就是一个密码输入框):(************)
    <input type="password" />
    密码输入框中输入的内容,将全部被小圆点覆盖,看不到原来,但实际还是原来的内容,只是被一些小圆点覆盖,并不是输入了一串小圆点。
    除了type属性,其他属性与文本输入框的属性相同。

3.单选按钮:(radio,通常用来做性别选择),一组单选按钮只能有一个被选择。
    <input type="radio" />(************)
    注意:
        1、一组单选框中,每个单选框的name属性值必须一样,否则将不能组成一组单选框,有可能所有的单选按钮都能被选中,这是不正确的。
        2、每个单选按钮必须设置value属性的值,否则数据传输到后台将是空值。
4.多选(checkbox,复选框):
    <input type="checkbox" />(************)
    注意:
        1、一组复选中,每个name属性的值也必须一样,否则将不是同一组复选框,
        2、同样,每个复选框都必须设置value属性的值,同单选框。

5.提交按钮(submit<允许,提交的意思>)
    一个表单,填写数据后,要进行提交,比如网页常见登录按钮,注册按钮等。作用是将整个表单中填写好的数据进行提交,到后台处理。
    <input type="submit" />(************)

按钮的属性:
    type:设置按钮的类型
        button:普通按钮,点击不会提交表单。
        submit:提交按钮,点击之后会将表单中数据提交。
        image:图片按钮,作用与提交按钮一样,也是用来提交表单的数据。
        reset:重置按钮,作用是点击后,将会清空该按钮所在表单中所有已填写好的数据。
    value:用来设置显示在按钮上的文字。
        submit按钮:默认显示:提交查询内容
        button按钮:默认没有任何文字
        image按钮:没有文字。
        reset:默认是重置。

    image:注意!!!
        图片按钮必须设置src属性引入图片,否则按钮上将没有图片。

6.隐藏域(hidden),不会显示在页面中,是隐藏的,通常是用来保存一些特定的数据。
    <input type="hidden" name="" value=""/>(***)

7.文件域(file,上传文件用的)
    <input type="file" name="" />(****)
    上传文件时:name属性是必须有的,否则文件将不可能上传成功!
8.菜单和列表(选择下拉框),通常用在选择省市的时候。
    <select>(************)
        <opiotn value="1">选项一</option>
        <opiotn value="2">选项二</option>
        <opiotn value="3">选项三</option>
    </select>
    写法,必须在<select></select>中嵌套<option></option>标签。
    <option>标签必须要有value属性。
9.多行文本域(textarea):(************)
    <textarea></textarea>
    通常要求浏览者输入多行文本时,就要使用多行文本域,而不是文字字段(单行文本域),要注意多行文本域不是用input标记,而是用一对<textarea>标记多行文本域。
    与单行文本域的区别是,单行文本域中的内容是写在input标记的value属性值中的,而多行文本域中的内容直接写在<textarea></textarea>这一对标签之间。

    属性:
        cols:表示该多行文本域初始的列数,这个列是按照一个字符来算的,一个字符占一列。
        rows:表示该多行文本域初始的行数,这个行也是按照一个字符来算的。
    cols和rows相当于是用width和height属性设置了高度和宽度。
    高版本的浏览器可以通过文本域右下角的三角形来拖动改变文本域的大小。


id属性:
    主要用来标记一个唯一的元素,这个元素可以是任意元素,就是同一个页面,id的值不能重复出现第二次,这是不符合规则的。
    就好比身份证号,每个人的身份证号不可能一样。
    写法与其它属性写法相同
    <input type="text" id="username">
    <table id="table"></table>
    ......
    CSS的时候再讲。

目录
相关文章
|
28天前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
|
2月前
|
数据安全/隐私保护
HTML 表单和输入
HTML 表单和输入。
13 3
|
2月前
|
移动开发 前端开发 数据安全/隐私保护
8.使用html制作表单
8.使用html制作表单
11 0
|
17天前
HTML_表单标签
HTML_表单标签
16 0
|
5天前
|
存储 移动开发 安全
【专栏:HTML基础篇】HTML表单基础:创建用户交互界面
【4月更文挑战第30天】本文介绍了HTML表单的基础知识,包括表单的基本概念、输入元素(如文本框、密码框、单选/复选框、提交/重置按钮等)、表单属性(如action、method、target)以及表单验证。了解这些内容能帮助开发者创建功能齐全、交互性强的用户界面,提升网页开发技能。
|
13天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
13 0
|
17天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
31 0
|
17天前
|
移动开发 JavaScript 前端开发
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
36 0
|
19天前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
9 0
|
21天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
23 1