第五章:表单

 张良   2022-11-14 11:38 

什么是表单?


表单用于收集用户输入的信息,并通过浏览器向网站传送。


表单 输入框 按钮都属于表单控件


如何实现表单?


form用于声明整个表单,定义数据收集范围,是双标签。

基本语法格式:

<form></form>

如何实现输入框?


输入框使用input标签实现,用来输入信息,是个单标签。

基本语法格式:

<form>

<input />

</form>


输入框的类型使用type属性控制

type:

text    文本框    输入单行文本内容

password    密码框 输入保密信息


根据不同的type属性,分为用户名,密码,提交按钮等。

基本语法格式:

<form>

<input type="类型" />

</form>


如何使用placeholder属性?


输入内容提示信息使用placeholder属性控制

placeholder    text(提示信息)    输入框中输入内容的提示信息


placeholder属性用于提示输入框的输入内容,

属性值为提示的文本内容。

基本语法格式:

<input placeholder="文本" name="名字"/>


如何实现提交按钮?


按钮的实现使用type属性控制;

按钮文字使用value属性控制。

type    submit    提交按钮

value    text(显示文字)    定义按钮的显示文字


提交按钮用来输入的信息提交到服务器

value属性定义按钮的显示文字

基本语法格式:

<input    type>="submit" value="值">


如何使用form表单?


表单具有的属性:acction、target

action    url    设置表单的提交地址

target    _blank _self    设置表单的打开方式


form是用于声明表单,定义数据采集范围的html标签。

基本语法格式:

<form action="url" target="_blank"></form>


如何实现选择框?


HTML中有两种选择框:单选框和复选框

基本语法格式:

<input type="类型值" />

type:

radio    单选框    只能选择一项

checkbox    复选框    可以选择多项


单选框为什么不能实现单选功能?


单选框实现单项选择的必备条件:通过name属性将单选框分为一组

基本语法格式:

<input type="radio" name="sex" />男

<input type="radio" name="sex" />女

注意:name属性的值:见名知义


选择框如何默认选中?


checked输定规定了在页面加载时处于默认选中状态的选择框

基本语法格式:

<input type="radio" name="aa" checked="checked" />男

<input type="radio" name="aa" /> 女


<input type="checkbox" checked="checked" />学习

<input type="checkbox" />复习

类型值:属性和属性值相同时,可以只写属性

<input type="checkbox" checked="" />


如何使用文件域?


文件域用于上传文件

基本语法格式:

<input type="file" />


如何使用按钮?


HTML中有三种按钮:提交按钮、重置按钮、普通按钮

基本语法格式:

<input type="类型值" value="值" />

类型值:

1.submit    提交按钮,向服务器发送表单数据

2.reset    重置按钮,输入的数据清空

3.button    普通按钮


type:

text    文本框

password    密码框

radio    单选框

checkbox    复选框

submit    提交按钮

reset    重置按钮

button    普通按钮

file    文件域


文本域:

textarea文本域是定义多行的文本输入框

基本语法格式:

<textarea></textarea>



如何改变大小?


cols文本域的列数(宽度)

rows文本域的行数(高度)

基本语法格式:

<textarea cols="列数" rows="行数"></textarea>


如何限定文字个数?


maxlength属性用于限定最大长度

基本语法格式:

<textarea maxlength="属性值"></textarea>


如何使用下拉列表?


下拉列表是在有限的空间里设置多个选项,例如出生年月日、省份

基本语法格式:

<select>

    <option>选项1</option>

    <option>选项2</option>

</select>


option的属性:selected默认选中

基本语法格式:

<select>

    <option selected="">选项1</option>

    <option>选项2</option>

</select>

注意:属性和属性值相同时,可以只写属性


四框:文本框 密码框 单选框 复选框

三钮:提交按钮 取消按钮(重置) 普通按钮

二域:文件域 文本域 【imag图像域提交】

一表:下拉列表


placeholder新增表单属性


新增表单控件

1.email    邮箱

2.tel    电话

3.nuber    数值

4.date    日期

5.url    网址

6.search    搜索

本文地址:https://www.yinmoulun.com/post/364.html,发布在阴谋论网,欢迎分享!

评论已关闭!