- ， 29 1月 2021
- 作者 847954981@qq.com
- 说明补充
表单 <form> 相关
在网站建设中，我们不可避免需要用户通过 输入 这一操作来提供一些信息。
如姓名、性别、用户名、密码等。
而如何建立一个用户友好的信息提供界面就需要交互式表单控件 <form> 的协助。
<form> 拥有两个属性 action 和 method
action 表示处理此表达信息的程序所在的URL,所述表单信息在提交时被发送到定义的地址。
method 它的值有 “GET” , “POST” ；其表示如何来发送表单信息。
|表单控件|
单行输入框 <input> —>单选框 —>多选框 |
|---|
多行输入框<textarea> |
选项菜单 <select> <option> |
按钮<button> |
<input> 是一个只有开始标签没有结束标签的内联元素，其作用于让用户输入一行限制的字符串。
效果为：
input 拥有多个属性：
type 属性指定输入类型
在单行文本输入框中，我们可以写 type=”text”
在如密码输入框中，我们可以写 type=”passward” 这样输入的内容就会以黑点表示。
当然下面展示我们并没有写出但默认还是 type=”text”（其实是我忘记写了，又懒得改了）
占位文本 “placeholder”
其效果为在输入框没有任何文字的情况下，在框内显示信息如：
实现为：
代码语言：javascript复制<input placeholder="输入你的名字">输入框名字 “name”
其作用为区别于其他 <input> 而利用 “name” 设定其名字，就不会和其他<input>搞混。
实现为
代码语言：javascript复制<input placeholder="输入你的名字" name="test">显示效果无变化就不展示了。
输入框的值 “value”
其作用为在输入框中预输入一个值。
效果为：
实现为：
代码语言：javascript复制<input placeholder="输入你的姓名" name="test" value="小虫">不可修改的输入框 “readonly” 和 “disabled”
在某些特殊情况，我们网站需要自动给用户分配如名称等信息，此时我们并不希望用户自行修改输入框内容，所以我们用到了 “readonly” 和 “disabled”
readonly 效果：
实现：
代码语言：javascript复制<input placeholder="输入你的姓名" name="test" value="小虫" readonly>disable 效果
实现：
代码语言：javascript复制<input placeholder="输入你的姓名" name="test" value="小虫" disabled>显而易见 两种方法间还是存在差异的
属性 | disable | readonly |
|---|---|---|
对象 | 所有表单元素 | input 和 textarea |
作用 | 使文本框不能输入，大概表单提交时，使用了disabled的元素的值不会被传递出去。 | 仅使文本框不能输入 |
外观 | 使文本框变灰 | 围观没有变化 |
<input>的 “type” 属性的其他值
在上面我们提到了，type 属性除了 “text” 还可以填写 “password” 来让输入显示为黑点。
单选框 “radio”
当我们把 type 里的值调成 “radio” 那么输入框就会变成一个单项选择框
效果：
实现为：
代码语言：javascript复制 <input type="radio" name="text3" value="男">
<input type="radio" name="text3" value="女"> name 相同即两个单选框表示同一题单选
当然，我们可以看到，单选框后并没有”男” “女”字样，那是因为 “value” 表示最后所提交的信息。想要单选框后面有文字只需在其后添加便可，如:
代码语言：javascript复制<input type="radio" name="text3" value="男">男效果：
男 女
当然，我们发现如此设计，只能点击圆圈在哪选择要选的选项，选择范围太小，对于用户友好的信息获取界面，我们希望用户只需点击到”男”这个字样便能选择到选项，于此，我们只需要将 分别包裹单选框即可，如：
代码语言：javascript复制<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语言
实现为：
代码语言：javascript复制<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”属性：表示文本域的可视宽度。
预输入信息可以在开始标签和结束标签之间填写
显示效果：
今天继续学HTML！
实现
代码语言：javascript复制 <textarea name:"test2" rows="5" cols="30" placeholder="今天学了啥鸭">今天继续学HTML!</textarea>当信息获取需要用户选取合适选项时，往往会出现选项众多的情况，这种情况下 单单 <input> 的单选框就显得有些不足了，因而我们需要选项菜单 <select> 以及选项 <option>
效果：
JavaPythonJavaScript
实现：
代码语言：javascript复制<select name="test5">
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select>要注意的是 value 的值为最后提交上去的信息，因而要保证每个选项不同。
如果需要多选菜单，可以在 <select> 中添加 “multiple”
效果如下：
JavaPythonJavaScript
实现：
代码语言：javascript复制<select name="test6" multiple>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
</select><button> 按钮
注册按钮：
效果：
注册
实现：
代码语言：javascript复制<button type="submit">注册</button>
