笔记 - 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的时候再讲。

目录
相关文章
|
2月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
1月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
1月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
2月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
2月前
|
移动开发 UED HTML5
HTML5 表单属性1
HTML5为&lt;form&gt;和&lt;input&gt;标签引入了多个新属性,增强了表单的功能性和用户体验。其中,&lt;form&gt;新增了autocomplete和novalidate属性;&lt;input&gt;则增加了如autofocus、formaction、placeholder等13个新属性,支持更精细的表单控制和数据验证。例如,autocomplete属性允许表单或输入字段提供自动完成功能,提高用户填写效率。
|
2月前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
2月前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
79 1
时尚的联系我们表单HTML模板(源码)