HTML 表单和输入

一、HTML 表单
HTML 表单用于收集不同类型的用户输入，表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 < form> 来设置:
格式如下

<form>
.
input 元素
.
</form>

二、HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（< input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

1、文本域（Text Fields）
文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符，表单本身并不可见

<form>
   姓名: <input type="text" name="name"><br>
   年龄: <input type="text" name="age">
</form>

浏览器显示如下：
在这里插入图片描述

2、密码字段
密码字段通过标签<input type="password"> 来定义:代码如下

<form>
       用户名: <input type="text" name="name"><br>
       密码: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。

3、单选按钮（Radio Buttons ）代码实现
<input type="radio"> 标签定义了表单单选框选项

<form>
    <input type="radio" name="sex" value="y">语文<br>
    <input type="radio" name="sex" value="s">数学
</form>

当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。
浏览器显示效果如下:
在这里插入图片描述
4、复选框（Checkboxes）
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
代码实现

<form>
   <input type="checkbox" name="student" value="student">学生<br>
   <input type="checkbox" name="tercher" value="tercher">老师
</form>

浏览器显示效果如下:
在这里插入图片描述

5、提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="headHtml.html" method="get">
      username: <input type="text" name="user">
      <input type="submit" value="Submit">
</form>

浏览器显示效果如下:

在这里插入图片描述
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “headHtml.html” 的页面。该页面将显示出输入的结果，浏览器中也可以看到。

6、更多实例

简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

预选下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。

文本域(Textarea)
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

代码实现：

<!--按钮-->
<form action="headHtml.html">
    <input type="button" name="按钮" value="提交"><br>
</form>
<!--富文本-->
<textarea name="textarea" id="" cols="30" rows="10">我是一个富文本</textarea>
<!--下拉框-->
<form>
    <select name="name">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</form>
<form>
    <select name="selected">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
        <option value="5">5</option>
    </select>
</form>

7、表单实例
带边框的表单
本例演示如何在数据周围绘制一个带标题的框。

带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

带有复选框的表单
此表单包含两个复选框和一个确认按钮。

带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。

从表单发送电子邮件
此例演示如何从表单发送电子邮件。

8、HTML 表单标签和描述

定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控件) 定义了元素的标签，一般为输入标题定义了一组相关的表单元素，并使用外框包含起来定义了元素的标题定义了下拉选项列表定义选项组定义下拉列表中的选项定义一个点击按钮 New 指定一个预先定义的输入控件选项列表 New 定义了表单的密钥对生成器字段 New 定义一个计算结果

代码实现：

<body>


<!--表单文本-->
<form>
   姓名：<input type="text"><br>
   年龄：<input type="text">
</form>
<!--密码-->
<form>
    用户名：  <input type="text" name="name"><br>
    密  码：  <input type="password" name="pwd">
</form>
<!--单选按钮-->
<form>
    语文<input type="radio" name="sex77" value="语文"><br>
    数学<input type="radio" name="sex77" value="数学">
</form>
<!--多选按钮-->
<form>
    学生<input type="checkbox" name="aa"><br>
    老师<input type="checkbox" name="aa">
</form>
<!--下拉框-->
<form action="">
    <input list="browsers"/>
    <datalist id="browsers">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </datalist>
</form>
<!--keygen定义了表单的密钥对生成器字段-->
<form action="headHtml.html" method="get">
    用户名: <input type="text" name="usr_name">
    加密: <keygen name="security">
    <input type="submit">
</form>
<!--定义选项组-->
<select>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>
<!--output定义一个计算结果-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

<!--富文本-->
<textarea name="textarea" id="" cols="30" rows="10">我是一个富文本</textarea>
<!--<fieldset>定义了一组相关的表单元素，并使用外框包含起来 ，<legend>定义了 <fieldset> 元素的标题-->
<form action="">
    <fieldset>
        <legend>title</legend>
        username: <input type="text" value="username" name="username" placeholder=""/> <br/>
        userage : <input type="text" value="userage" name="userage"/> <br/>
        usersex : <input type="text" value="usersex" name="usersex"/>
    </fieldset>
</form>
<!--提交-->
<form action="headHtml.html">
    <input type="button" name="按钮" value="提交"><br>
    username：<input type="text" name="user">
    <input type="submit" value="提交">
    
</form>
<!--下拉框-->
<form>
    <select name="name">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</form>
<form>
    <select name="selected">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
        <option value="5">5</option>
    </select>
</form>


<!--提交文本内容-->
<form action="HTML1.html" method="get">
    <input type="radio" value="a" name="a"> a <br>
    <input type="radio" value="b" name="a" checked/> b
    <input type="submit" value="提交"/>
</form>

<form action="headHtml.html" method="get">
    <input type="checkbox" name="sex1" value="2"/>2 <br/>
    <input type="checkbox" name="sex" value="3" checked/> 3
    <input type="submit" value="提交"/>
</form>

<form action="headHtml.html" method="get">
    username: <input type="text" value="aaa" name="username"/> <br/>
    pwd <input type="password" name="pwd" value="bbb"/>
    <input type="submit" value="submit"/>
</form>

<form action="headHtml.html">
    <fieldset>
        <legend>title</legend>
        username: <input type="text" value="username" name="username" placeholder=""/> <br/>
        userage : <input type="text" value="userage" name="userage"/> <br/>
        usersex : <input type="text" value="usersex" name="usersex"/>
        <input type="submit" value="提交"/> <input type="reset"/>
    </fieldset>
</form>

<h4>发送邮件</h4>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
    邮箱：<input type="text" value="" name="email"> <br/>
    内容：<input type="text" value="" name="content"> <br/>
    其它: <input type="text" value="" name="other"> <br>
    <input type="submit" value="提交"/> <br>
    <input type="reset" value="重置"/>

</form>

</body>

9、其他：重置按钮
<input type="reset">定义重置按钮

<input type="reset" name="button" id="button" value="重置">

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

表单中的单选按钮可以设置以下几个属性：value、name、checked

value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked=“checked” 时，该选项被默认选中

<form>
    <p>你生活在哪个国家？</p>
    <input type="radio" name="country" value="China" checked="checked">中国<br />
     <input type="radio" name="country" value="the USA">美国
</form>

注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。

猜你喜欢