[HTML]表单创建的基础!如何使用表格和输入

“我不了解表单标签和输入标签...”
“至少在创建表单时需要知道什么?”

这是第一次使用HTML设计表单的人将始终面临的问题。
对于那些主要学习网页设计的人,第一次添加功能元素时将出现“表单”。

要使此表单正常工作,您需要了解一些内容,但是一开始很难立即理解。但是请放心。表单中常用的功能在某种程度上是固定的,一旦您记住它们,它们都是有用的功能。

在这里,我们将为那些初次学习表格的人解释表格的基础。有经验的人只会知道他们已经知道的东西。

[对于初学者]仔细解释如何编写CSS(样式表)

使用表单的场景

只要有网站可以与用户交流,很少有网站没有表格。换句话说,这是任何Web创建者都必须掌握的基本知识之一。下面的屏幕是一个常见的表单,并使用表单功能。

登入画面

付款画面

查询画面

现在,让我们看看如何制作表格。

表单可以使用的最少元素

首先,让我们创建一个仅包含名称的简单表单。如果可以使用emmet函数,请在编辑器中键入“ form”,然后单击“控制+ e显示以下代码。这是表单创建的开始。有一些“表单标签”可用于创建表单。

<form action=""></form>

表单标签

在这里,让我们通过在此“表单标签”中放入最少的必需元素来了解“机制”。您肯定想通过表单标签了解两件事。

动作属性 “动作=“””,编写URL以跳过form标记中的输入信息。必须绝对指定。该路径通常是不正确的,应将其记为邮件未到达的错误原因。
方法 方法属性的值具有“ get”和“ post”,但是在联系表格的情况下,“ post”可以。如果指定get,则输入信息将显示在URL中,因此请确保在此处设置“ post”。

由于``动作''的设置与HTML以外的语言有关,因此难度级别会立即上升。这次,我将省略对“形式”的解释。一旦下面的代码完成。
该代码的意思是“请告诉表单输入到另一个名为“ post.cgi”的文件,该文件位于“邮箱文件夹”中的“ post格式”中。

<form action="./mailbox/post.cgi" 方法="post">ここに入力情報を置く。</form>

“类型=“”submit”」の設定

简单地设置表单标签不会将输入值传递到“ post.cgi”文件。 “按下发送按钮”的动作是必要的。这是我们需要的下一个元素。

<form action="./mailbox/post.cgi" 方法="post">
  <input type="submit" value="送信">
</form>

信息未传输到下一个文件的问题是您忘记指定此“提交”。

<form action="./mailbox/post.cgi" 方法="post">
  <button type="button" value="送信">送信ボタン</button>
</form>

如果要将输入信息传递到下一个文件,请使用input元素或button元素“键入=“”submit”」を設定する必要があります。 また、2つ目の「button type=”button”适用于将按钮显示为设计,但不足以使其用作表单。

“值=“”送信”这在表单中也起着重要作用。这称为“值属性”,但它具有以下特征,可能需要一些时间来习惯。

输入类型=”text” value=”山田太郎” “类型=“”text”如果您指定“”,则如果未在表单中输入任何内容,则将值“ Taro Yamada”作为初始值发送。换句话说,在文本的情况下,value属性起着设置初始值的作用。
输入类型=”radio/checkbox” 表单中也使用复选框和单选按钮。此时,“输入类型=”radio”」や「input type=”checkbox””。例如,使用它来询问针对性别的选择。 “输入类型=””radio” value=”男性”如果输入“”,则单击单选按钮并发送信息时,将发送数据“ male”。对于这样的选择,将发送按钮名称。

通过输入元素输入数据

最后需要的最低功能是创建输入表单。如果甚至只有一种输入形式是一种功能,则现在可以发送该数据。在这里,典型的“输入类型=”text”让我们使用。这是编写和发送它的元素。

<form action="./mailbox/post.cgi" 方法="post">
 <input type="text"><br>
  <input type="submit" value="送信"><br>
</form>

它将显示如下。只是显示屏上的这种设计,但是您已经发现有很多基本要素需要理解。当然,仅此一项在实践中是完全没有用的,因此让我们学习此最小功能,然后学习更频繁的元素。

常用的便捷类型以及如何使用它们

在创建表单时,为了创建丰富的表单,最好主要学习两件事,即“输入类型类型”和“如何使用属性”。如果在某种程度上已经习惯了它,那么任何人都可以轻松使用它。

以下是常用的“输入类型类型”。您不必从一开始就使用所有内容。让我们逐渐记住。

 

没有 输入类型 影响
1 电子邮件 电子邮件アドレスを入力するフォームを作ります。
2 密码 对于输入值,创建一个隐藏并显示密码的输入表单。您还可以使用maxlength和minlength属性限制输入字符的数量。
3 电子邮件 创建一个表单以输入电子邮件。例如,如果您忘记了@标记并按发送按钮,则将无法发送消息,并会收到警告。
4 创建一个表格以输入数字。例如,在输入参与者数量和研讨会的允许数量时很方便。
5 无线电 创建一个称为单选按钮的选择按钮,从多个选项中选择一个。
6 复选框 当您想要选择是否选择时,这很有用。
6 图片 选择一个图像并创建一个发送按钮。
7 文件 您可以创建一个表单来选择文件。
8 重启 创建一个按钮以重置输入。

当用html表示以上内容时,将如下所示。

<form action="./mailbox/post.cgi" 方法="post">
   <input type="text"><br>
   <input type="password"><br>
   <input type="email"><br>
   <input type="number"><br>
   <input type="radio"><br>
   <input type="checkbox"><br>
   <input type="image"><br>
   <input type="file"><br>
   <input type="submit" value="送信">
   <input type="reset" value="リセット">
</form>

上面显示如下。在密码字段中,您将无法知道输入的密码,并且在输入其他功能时,只能输入指定的输入类型。

例如,“输入类型=”email”如果设置为“”,则当您忘记电子邮件中的“ @”时,将会收到适当的警报。

很重要的一点

现在,有一些关于理解的说明。例如,您不认为没有功能可以在多行上写自由语句,也没有功能可以从下拉列表中选择一个县吗?当然有。但是这些功能需要使用另一个非输入元素的“标签”。如果输入有误,请不要执行以下操作。显示内容将不是您想要的。

<form action="./mailbox/post.cgi" 方法="post">
   <input type="textarea"><br>
   <input type="select"><br>
</form>

文本areaタグで複数行の文章を書こう。

输入诸如“观点和印象”和“公司介绍”之类的长句子时,“ 文本area”标签将起作用。在带有emmet的编辑器中键入“ 文本area”,然后按“ 控制+ e”以获取代码。您应该看到以下代码。这是textarea标签所基于的代码。另请注意,“ 文本area标签”具有结束标签(输入标签没有结束标签)。特别是,您可以通过指定cols(列)和行(行)来调整输入框的大小。

<form action="./mailbox/post.cgi" 方法="post">
  <textarea name="" id="" cols="30" rows="10"></textarea><br>
</form>

让我们使用select标签启用下拉类型选择。

通过使用选择标签,您可以显示并选择一个下拉类型菜单(可以根据设置关闭下拉菜单)。需要注意的是,它还具有一个开始标签和一个结束标签,以及一个“选项元素”。确保在“选项元素”中设置“值属性”。 “样品[电子邮件 protected]@“数据未发送。换句话说,将要发送的数据设置为“值属性”中的值。同时,将要显示的字符括在开始标签和结束标签中。

<select name="example">
  <option value="sample_1">以下から選択してください</option>
  <option value="sample_2">サンプル_1</option>
  <option value="sample_3">サンプル_2</option>
  <option value="sample_4">サンプル_3</option>
</select>

必需的属性以及如何使用它们

现在,最后,在输入元素中添加“类型属性”以外的“属性”。这些属性是可以进一步增强表单功能的元素,但是可以省略(必须在form标记中设置action和method属性)。经常使用以下三个属性。

没有 属性类型 影响
1 名称属性 它被放置在每个表单组件中,例如输入标签,选择标签,文本区域标签,并用于标识。因此,像id一样,不能有重复的同名。将此视为发送的ID。它充当表单中每个元素的标签。
2 值属性 用作默认设置。名称和值属性的角色可能令人困惑,但是例如,当使用选择标记时,名称=”food”/value=”fish”这样,整个选择标签的名称将为“食物”,并且个人信息“鱼”可能会作为个人选择的数据包括在内,因此您可以识别出区别。
3 占位符属性 设置后,初始值将显示在显示字段中。它通常用于示例显示“请这样写”。
4 要求属性 当您要确保输入时进行设置。将其包含在您需要输入的信息中是一个好主意,因为如果您不输入信息,将会很高兴。怎么写是“必填=”true”」と書きます。

现在,让我们输入刚刚描述的必要属性。

  	<h3>入力フォーム</h3>
  	<form action="./mailbox/post.cgi" 方法="post">
	  <input type="text" name="name" placeholder="山田太郎" required="true"><br>
	  <input type="password" name="name" required="true"><br>
	  <input type="email" name="email" placeholder="[电子邮件 protected]" required="true"><br>
	  <input type="number" name="Number_of_join"><br>
	  <input type="radio" name="gender" value="男性">男性<br>
	  <input type="radio" name="gender" value="女性">女性<br>
	  <input type="checkbox" name="status" value="会社員">会社員<br>
	  <input type="checkbox" name="status" value="学生">学生<br>
	  <select name="prefecture">
  	  	<option value="">以下から選択してください</option>
  	  	<option value="東京">東京</option>
		<option value="神奈川">神奈川</option>
		<option value="千葉">千葉</option>
  	  </select><br>
	  <input type="image" name="picture"><br>
	  <input type="file" name="attachment"><br>
	  <textarea name="textarea" id="" cols="30" rows="10" placeholder="ご感想を書いてください。"></textarea><br>
	  <input type="submit" value="送信">
	  <input type="reset" value="リセット">
	</form>

然后,将显示如下。这还不够,但是形式是形式。根据占位符属性,在需要的地方显示一个示例,并且“ required =”true”请按“发送按钮”,而不在设置“”的地方输入任何内容。您不应该继续前进。

设置标签。

最后,让我们为每个元素添加标签以使其形式更好一些。标签标签可用。由于里面有一个“ for attribute”,因此将“ id”设置为要链接的元素(例如输入元素),并将“ for =“”id名”」としてください。

<h3>入力フォーム</h3>
<form action="">
  	  <label for="name">名前</label>
	  <input type="text" name="name" placeholder="山田太郎" required="true"><br>
	  <label for="password">パスワード</label>
	  <input type="password" name="name" id="password" required="true"><br>
	  <label for="email">Email</label>
	  <input type="email" name="email" placeholder="[电子邮件 protected]" id="email" required="true"><br>
	  <label for="number">Number</label>
	  <input type="number" name="Number_of_join" id="number"><br>
	  <fieldset>
	  	<legend>性別</legend>
	  	<label for="jyosei">男性</label>
	    <input type="radio" name="gender" value="男性" id="dansei"><br>
	    <label for="jyosei">女性</label>
	    <input type="radio" name="gender" value="女性" id="jyosei"><br>
	  </fieldset>
	  <fieldset>
	  	<legend>ステータス</legend>
	  	<label for="working">会社員</label>
	    <input type="checkbox" name="status" value="会社員" id="working"><br>
	    <label for="student">学生</label>
	    <input type="checkbox" name="status" value="学生" id="student"><br>
	  </fieldset>
	  <label for="prefecture">都道府県</label>
	  <select name="prefecture" id="prefecture">
  	  	<option value="">以下から選択してください</option>
  	  	<option value="東京">東京</option>
		<option value="神奈川">神奈川</option>
		<option value="千葉">千葉</option>
  	  </select><br>
  	  <label for="picture">画像添付</label>
	  <input type="image" name="picture" id="picture"><br>
	  <label for="file">ファイル添付</label>
	  <input type="file" name="attachment" id="file"><br>
	  <label for="comment">コメント</label><br>
	  <textarea name="textarea" id="" cols="30" rows="10" id="comment" placeholder="ご感想を書いてください。"></textarea><br>
	  <input type="submit" value="送信">
	  <input type="reset" value="リセット">
</form>

它将显示如下。在这里,我们使用方便的“字段集标签”和“传奇标签”来安排选择的设计。外壳制作精良。

概要

学习表格时,将其分为两个部分是一个好主意:最小的必需功能和附加的耗时功能。在这里,我们集中于功能方面,并解释了哪些元素起作用以及如何起作用。但这还不够。这里描述的设计不如服务,因此,为了进一步改进它,请学习有用的CSS库(例如“ bootstrap”和“ bulma”)来安排设计。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。