Day10 Html常用标签_5

今天的主题是"表单"

Html表单可以跟使用者互动，将使用者输入的资料传回後端资料库或服务器做纪录，像是最基本的注册网页。而今天要介绍几种我们常会看到表单的形式!

首先表单也是一种标签，就像是段落p、超连结a一样，只是它的名称是form，想当然他也可以添加许多不同的属性，让我们先看看form有那些可以设定的属性吧!

1.Action属性:这个属性指的就是你输入的资料要送去哪边，我们会指定一个位置(URL)来接收资料。

<form action="location.php">

2.method属性:这个属性指的是当你传送资料时，是以哪一种方式去传送。而我们分成两种方式，分别为GET与POST。

GET: 通常用在小资料传输，及资料内容不太需要保密，

<form action="location.php" method="GET">

POST: 通常用在大资料传输，或有包含档案，资料内容隐密的，像是密码。

<form action="location.php" method="POST">

介绍完了form的属性後，我们要看到的是html表单常用的元素及属性!

表单元素就是不同类型的输入形式，例如: input元素、单选按钮、提交按钮。

而既然有元素!当然就会有可以设定的属性，这边我们先介绍html会用到的属性。

1.input输入栏位，input也可以添加不同属性，让我们来看看可以做哪些设定吧!

文本输入

<input type="text">这就是建立一个文字输入的栏位

<body>
    <form>
        请输入你的名子:<br>
        <input type="text">
        <br>
    </form>
</body>


这就会是呈现出来的结果!有没有对他有印象呢?

单选按钮

<input type="radio">建立出单选按钮的选项输入

<body>
    <form>
        <input
            type="radio"
            name="sexual"
            value="男性"
        >男生
        <br>
        <input
            type="radio"
            name="sexual"
            value="女性"
        >女生
    </form>
</body>

提交按钮

<input type="submit">建立一个送出表单资料的按钮

<body>
    <form action="location.php">
        请输入你的姓名:<br>
        <input
            type="text"
            name="firstname"
            value="jason"
        >
        <br>
        <input
            type="submit"
            value="缴交"
        >
    </form>
</body>


简单来说，他就是那个缴交的按钮，把资料传送出去!

2.textarea 多行段落文字输入栏位

这就是给你一个自己设定大小的框框可以输入文字。

<textarea rows="设定框框的高度"
          cols="设定框框的宽度">
  
  输入框框内的初始文字
  
</textarea>

<body>
    <form >
        <p>留言区: </p>
        <textarea
                name="comments"
                rows="10"
                cols="25"
            >你的回馈</textarea>
    </form>
</body>

而看到这里，你可能会有些许疑问，上面的name跟value是在设定甚麽东西呢?其实他就是Html的属性，让我来为你介绍。

name属性

简单来说，name属性的意思就是要让後端程序知道你要传送的资料名称，去对应到後端要接受的资料，这样子在程序可读性上也会提高，才晓得你传的这个资料是什麽。

<input type="text" name="yourname">

value属性

value後面给他的值就是你表格内的预设值。一开始显示的值。
<input type="text" value="我的预设值">

<body>
    <form action="location.php">
        <input
            type="text"
            value="初始值"
        >
    </form>
</body>

介绍完了表单的常用元素跟属性!就让我们来实作一个调查姓名、电子邮件、性别、回馈建议的表单吧!

<body>
    <form
        action="location.php"
        method="post"
    >
    
        <p>请输入你的姓名:</p>
        <p><input
                type="text"
                name="yourname"
                value="你的大名"
            ></p>
    
        <p>电子邮件:</p>
        <p><input
                name="species"
                type="text"
                value="Email"
            ></p>

        <p>你的性别:</p>
        <p><input type="radio" name="sexual" value="male">男生</p>
        <p><input type="radio" name="sexual" value="female">女生</p>

        <p>对於我们的建议: </p>
        <p><textarea
                name="comments"
                rows="5"
                cols="20"
            >你的建议</textarea></p>
            
        <p><input
                type="submit"
                value="送出资料"
            ></p>
    
    </form>
</body>

赶快去试试看你写的跟我是不是一样吧!今天的教学就到这了!


<<:  [Day24] NLP会用到的模型(七)-transformer encoder

>>:  Day09 - 实作一个状态机 - 2

笔记我使用 NSIS 制作 Windows 安装档的过程

NSIS (Nullsoft Scriptable Install System) 是一个建立安装...

Elementor Cloud 将大举切入网站主机市场

Elementor 页面编辑器不甘心只是一个编辑工具，继早前跟 Flywheel 和 Blueho...

Day15_附录A.控制项(A.12运作安全)

跳着写呀XD"~ 简单来说，就是维运罗(个人理解啦，也可能想错了)。 ▉A.12.1 运作...

【Day 11】C 语言的赋值运算子

赋值运算子（Assignment operator） ： 指的是同时执行「算数运算子或位元运算子」以...

Day18 Laravel - CRUD .feat RESTful API

过了17天的铺陈终於迎来了我最喜欢的18天，前面已经建立起一个良好的基础环境可以好好的开始专案了，所...