乐趣区

关于html:HTML表单标签

表单蕴含三个根本组成部分:表单标签 表单域 表单按钮

1,表单标签

HTML 表单用于收集用户输出,表单应用<form> 标签创立。表单可蕴含文本字段、复选框、单选框、提交按钮等等。

留神:<form>元素是块级元素,其前后会产生折行。

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

form 表单的属性

  • action="url":申请地址,指定 form 表单向何处发送数据。
  • name="login":作用是给表单起名,为了便于咱们操作。
  • enctype ="string":规定在发送表单数据之前,如何对表单数据进行编码。通常在应用文件上传时,咱们会 enctype=”multipart/form-data”,以二进制传输。
  • method ="get/post":指定表单以何种形式发送到指定的服务器程序,该属性定义浏览器将表单中的数据提交给服务器处理程序的形式。对于 method 的取值,最罕用的是 get 和 post。

2,表单域

要提交数据的表单域必须加 name 属性。不然,该表单域的数据不会提交到服务器上。

<input>标签

  • <input>用于收集用户信息,依据不同的类型显示不同的模式。input 是空标签,它没有完结标签,在开始标签中完结。
  • <input> 元素依据不同的 type 属性,能够变动为多种状态。
  • <input> 元素设置 name 属性,用于网络申请时提交对应输出的字段。

文本框

定义单行的输出字段,用户可在其中输出文本。它是一个单行文本框,input 的默认类型即是 text 类型。

例:

<form action="">
    用户名:<input  name="userName" type="text">
</form>

明码框

类型为 password 时,它用于收集用户输出的明码,在你输出时,浏览器会把输出的内容以符号来代替。

例:

<form action="">
    明码:<input  name="pwsname" type="password">
</form>

文本框和明码框都能够增加 placeholder 属性,用于设置输出字段预期值的提示信息。该提醒会在输出字段为空时显示,并会在字段取得焦点时隐没。

单选框

类型为 radio 时,用于定义单选按钮,name 属性值雷同的 input 单选框只能有一个被选中。

  • checked="checked" 设置默认选中的单选框。
  • value="1"是提交到服务器时给后盾程序员们看的。

例:

<form action="">
    性别:男 <input name="sex" checked="checked" type="radio" value="1">
         女 <input name="sex" type="radio" value="2">
 </form>

复选框

类型为 checkbox 时,用于定义复选按钮,复选框容许用户在肯定数目的抉择中选取一个或多个选项。

例:

<form action="">
    兴趣爱好:篮球 <input type="checkbox" name="like1" value="1" checked>
             足球 <input type="checkbox" name="like2" value="2">
             游泳 <input type="checkbox" name="like3" value="3">
             跑步 <input type="checkbox" name="like4" value="4">
</form>

文件上传

类型为 file 时,默认为单文件上传。

multiple="multiple" 设置为多文件上传。

例:

<form action="">
    <input type="file" name="file" multiple="multiple">
</form>

暗藏字段

暗藏字段对于用户是不可见的。暗藏字段通常会存储一个默认值,它们的值也能够由 JavaScript 进行批改。

例:

<form action="">
    <input type="hidden" name="hidden" value="123">
</form>

下拉列表

<select> 元素定义下拉列表;

<option>元素定义待抉择的选项;

列表通常会把首个选项显示为被选选项,通过增加 selected 属性来定义预约义选项。

例:

<form action="">
    抉择您喜爱的水果:<select name="select">
        <option value="apple"> 苹果 </option>
        <option value="banana"> 香蕉 </option>
        <!-- 榴莲设置为选中状态 -->
        <option selected value="durian"> 榴莲 </option>
    </select>
</form>

单选按钮、复选框默认选中用:checked 属性。

下拉列表应用:selected 属性。

应用 size 属性设置下拉列表开展,应用 multiple 属性设置多选。

<form action="">
    <select name="select" size="4" multiple id="">
        <option value="1"> 重庆 </option>
        <option value="2"> 武汉 </option>
        <option value="3"> 北京 </option>
        <option value="4"> 上海 </option>
    </select>
    <input type="submit">
</form>

文本域

<textarea> 元素定义多行输出字段(文本域)

cols:规定文本区内的可见宽度。

rows:规定文本区内的可见行数。

<form>
    <textarea name="text" cols="50" rows="10"></textarea>
</form>

文本域能够增加 placeholder 属性,用于设置输出字段预期值的提示信息。

<label> 标签

label 是 input 的形容,它自身不会有特殊效果,但它和其它 input 标签应用能够晋升用户的应用体验,用户不必非得点击到按钮,而是点击文字即可选中,如“记住明码”。

通过 label 的 for 指向按钮的 id 来绑定,for 和 id 属性的值要雷同。

<form action="">
    <label for="userName"> 请输出用户名:</label>
    <input type="text" id="userName">
</form>
<form action="login.jsp">
    性别:<label for="man"> 男:</label>
    <input type="checkbox" id="man">
    <label for="woman"> 女:</label>
    <input type="checkbox" id="woman">
</form>

3,表单按钮

重置按钮

重置按钮会革除表单中的所有数据。

value="重置"设置重置按钮上显示的文字。

<form action="">
    用户名:<input name="userName" type="text">
    性别:男 <input name="sex" checked="checked" type="radio" value="1">
         女 <input name="sex" type="radio" value="2">
    <input type="reset" value="重置">
</form>

提交按钮

type=”submit” 定义提交按钮。提交按钮用于向服务器发送表单数据,数据会发送到表单的 action 属性中指定的页面。

value="提交"设置提交按钮上显示的文字。

<form action="">
    用户名:<input name="userName" type="text">
    性别:男 <input name="sex" checked="checked" type="radio" value="1">
         女 <input name="sex" type="radio" value="2">
    <input type="submit" value="提交">
</form>

一般按钮

button 类型的只是一个一般的按钮,而 submit 有一个提交的作用,在没有加 js 代码的状况下,button 只是个装璜。

<form action="">
    <input type="button" value="按钮">
</form>

提交按钮

image 类型的 input 也是具备一个提交的作用,不同的是能够指定一幅图片来作为按钮,不提倡应用 image,因为它有时候会提交两次。

<form action="">
    <input type="image" src="img/bg.jpg">
</form>
退出移动版