表单 <form> 相关

在网站建设中,我们不可避免需要用户通过 输入 这一操作来提供一些信息。

如姓名、性别、用户名、密码等。

而如何建立一个用户友好的信息提供界面就需要交互式表单控件 <form> 的协助。

<form> 拥有两个属性 actionmethod


action 表示处理此表达信息的程序所在的URL,所述表单信息在提交时被发送到定义的地址。

method 它的值有 “GET” , “POST” ;其表示如何来发送表单信息。



|表单控件|

单行输入框 <input>   —>单选框   —>多选框
多行输入框<textarea>
选项菜单 <select> <option>
按钮<button>

<input> 是一个只有开始标签没有结束标签的内联元素,其作用于让用户输入一行限制的字符串。

效果为:

input 拥有多个属性:

type 属性指定输入类型

在单行文本输入框中,我们可以写 type=”text”

在如密码输入框中,我们可以写 type=”passward” 这样输入的内容就会以黑点表示。

当然下面展示我们并没有写出但默认还是 type=”text”(其实是我忘记写了,又懒得改了)


占位文本 “placeholder”

其效果为在输入框没有任何文字的情况下,在框内显示信息如:

实现为:

<input placeholder="输入你的名字">

输入框名字 “name”

其作用为区别于其他 <input> 而利用 “name” 设定其名字,就不会和其他<input>搞混。

实现为

<input placeholder="输入你的名字" name="test">

显示效果无变化就不展示了。


输入框的值 “value”

其作用为在输入框中预输入一个值。

效果为:

实现为:

<input placeholder="输入你的姓名" name="test" value="小虫">

不可修改的输入框 “readonly”“disabled”

在某些特殊情况,我们网站需要自动给用户分配如名称等信息,此时我们并不希望用户自行修改输入框内容,所以我们用到了 “readonly” “disabled”

readonly 效果:

实现:

<input placeholder="输入你的姓名" name="test" value="小虫" readonly>

disable 效果

实现:

<input placeholder="输入你的姓名" name="test" value="小虫" disabled>

显而易见 两种方法间还是存在差异的

属性disablereadonly
对象所有表单元素input 和 textarea
作用使文本框不能输入,大概表单提交时,使用了disabled的元素的值不会被传递出去。仅使文本框不能输入
外观使文本框变灰围观没有变化
当然在不同浏览器下,外观可能有所区别

<input>“type” 属性的其他值

在上面我们提到了,type 属性除了 “text” 还可以填写 “password” 来让输入显示为黑点。

单选框 “radio”

当我们把 type 里的值调成 “radio” 那么输入框就会变成一个单项选择框

效果:

实现为:

 <input type="radio" name="text3" value="男">
 <input type="radio" name="text3" value="女"> 

name 相同即两个单选框表示同一题单选

当然,我们可以看到,单选框后并没有”男” “女”字样,那是因为 “value” 表示最后所提交的信息。想要单选框后面有文字只需在其后添加便可,如:

<input type="radio" name="text3" value="男">男

效果:

当然,我们发现如此设计,只能点击圆圈在哪选择要选的选项,选择范围太小,对于用户友好的信息获取界面,我们希望用户只需点击到”男”这个字样便能选择到选项,于此,我们只需要将 分别包裹单选框即可,如:

<label><input type="radio" name="text3" value="男">男</label>

效果为:

使用

<input type=”radio” name=”text3″ value=”男” id=”男”>

<label for=”男”>男</label>

也拥有相同效果

复选框 “checkbox”

当我们将 <input>type 的值改为 “checkbox” 就会变为复选框。

效果为:

你会的计算机语言:

Java JavaScript Python C语言

实现为:

<input type="checkbox" name="text4">Java
<input type="checkbox" name="text4">JavaScript

“checkbox” 同样支持 <label> 也同样需要相同 name 来代表同一道复选题

详见上面的 “radio”

多行输入框 <textarea> 输入的内容超过一行的长度时,它会自动换行,而单行输入框则不会换行且其存在结束标签。但其余很多地方与单行输入框很相似

textarea 所拥有的属性:

“name”属性:同 <input> 中 name

“placeholder”属性:同 <input> 中 placeholder

“rows” 属性:表示行数(高度)。

“cols”属性:表示文本域的可视宽度。

预输入信息可以在开始标签和结束标签之间填写

显示效果:

实现

 <textarea name:"test2" rows="5" cols="30" placeholder="今天学了啥鸭">今天继续学HTML!</textarea>

当信息获取需要用户选取合适选项时,往往会出现选项众多的情况,这种情况下 单单 <input> 的单选框就显得有些不足了,因而我们需要选项菜单 <select> 以及选项 <option>

效果:

实现:

<select name="test5">
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select>

要注意的是 value 的值为最后提交上去的信息,因而要保证每个选项不同。

如果需要多选菜单,可以在 <select> 中添加 “multiple”

效果如下:

实现:

<select name="test6" multiple>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select>

<button> 按钮

注册按钮:

效果:

实现:

<button type="submit">注册</button>