HTML表单和输入

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML表单和输入相关的知识，希望对你有一定的参考价值。

定义文本域

<html>
    <body>
        <form>
            姓：
            <input type="text" name="firstname">
            <br/>
            名：
            <input type="text" name="lastname">
        </form>
        </body>
</html>

定义密码域

<html>
    <body>
        <form>
            姓：
            <input type="text" name="firstname">
            <br/>
            名：
            <input type="text" name="lastname">
            <br/>
            密码：
            <input type="password" name="password">
        </form>
        </body>
</html>

表单

表单是一个包含表单元素的区域

表单元素是允许用户在表单中(比如：文本域、下拉列表、单选框、复选框等)输入信息的元素。

表单使用表单标签<form>定义

多数情况下呗用到的表单标签是输入标签<input>。输入类型是由类型属性type定义的。注意：表单本身是不可见的，大多数浏览器，文本域的缺省宽度是20个字符。

单选按钮radio

<input type="radio" name="sex" value="male">male

 

表单的动作属性(action)和确认按钮

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

加入在文本框输入几个字母，点击确认按钮，输入数据会传送到html_form_action.asp的页面，该页面将会显示输入的结果。

复选框：checkbox

下拉列表

<html>

<body>

<form>
<!定义一个选择列表>
<select name="cars">
<!option定义下拉列表的选项>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

创建一个带有预选值的下拉列表，使用option标签下的selected属性

<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

通过使用textarea标签创建多行的文本输入控件

<html>
<body>

<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.

在数据周围绘制一个带标题的框

<!DOCTYPE HTML>
<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

在表单中发送电子邮件

<html>

<body>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>
</body>
</html>

 

以上是关于HTML表单和输入的主要内容，如果未能解决你的问题，请参考以下文章

十个html5代码片段，超实用，一定要收藏

如何使子表单行项目在 zoho creator 片段页面的 HTML 表格中仅出现一次？

从viewPager片段（Kotlin）中获取用户输入信息

HTML html的Textmate片段 - 配对输入和标签

[vscode]--HTML代码片段（基础版，reactvuejquery）

VSCode 如何操作用户自定义代码片段（快捷键）