HTML 表单的用法

HTML表单

form表单

form表单用于把用户输入的数据提交给后台服务器
name表示提交的表单名称，action表示数据提交的地址，methods表示数据提交的方式，有get和post，默认是get

<form name="myform" action="url" method="get/post"><form>

<label>

<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

HTML表单有四种

1. <input>
2. <textarea>
3. <select>
4. <button>

<input>

1. type="text"
   单行文本输入框
   <input type="text" maxlength=10 placehoder="请输入用户名">

2. type="password"
   密码输入框
   <input type="password" placehoder="请输入用户名">

3. type="checkbox"
   复选框
   <input type="checkbox"> 男
   <input type="checkbox"> 女

4. type="radio"
   单选框
   <input type="radio">

5. type="submit"
   有提交动作
   <input type="submit" value="Submit">

6. type="button"
   无提交动作
   <input type="button" value="Button">

<textarea>

多行文本输入框

<textarea rows="行数" cols="列数">
    文本
</textarea>

<select>

创建单选或多选菜单

<select name="city ">
<!-- 下拉选框 -->
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
</select>

<button>

 <button>提交</button>

所有的表单元素都要放在<form>标签里面，这样才能确保数据信息可以提交

<form action="url" method="get/post">
    <div class="username">
        <label for="username">姓名</label>
        <!-- 如果您在label 元素内点击文本，就会触发name与for相同的控件 -->
        <input type="text" name="username" placeholder="请输入用户名">
       <!-- placeholder提示用户输入内容，focus的时候小时，blur的时候显示 -->
    </div>
    <div class="password">
        <label for="password">密码</label>
        <input type="password" name="password" placeholder="请输入密码">
    </div>
    <div class="hobby">
        <label for="hobby">爱好</label>
        <input name="hobby" type="checkbox" checked> dance
        <input name="hobby" type="checkbox"> swim
        <!-- name相同的为同一组，checked表示默认选中 -->
    </div>
    <div class="sex">
        <label>性别</label>
        <input type="radio" name="sex" value="男" checked> 男
        <input type="radio" name="sex" value="女"> 女
        <!-- name相同的为同一组，checked表示默认选中 -->
    </div>
    <textarea rows="10" cols="20">
    <!-- 多行文本输入框，没有value -->
    </textarea >
    <div class=" city ">
        <select name="city ">
        <!-- 下拉选框 -->
            <option value="beijing">北京</option>
            <option value="shanghai" selected>上海</option>
            <!-- selected表示默认选中此项 -->
        </select>
    </div>
    <input type="file " name="myfile " accept="image/png">
    <!-- 文件上传 accept控制可以上传的文件格式 -->
    <input type="hidden" name="csrf" value="12345623fafdffdd">
    <input type="button" value="Button">
    <!-- 点击不会提交 -->

    <input type="submit" value="Submit">
    <!-- 点击会提交 -->

    <input type="reset" value="Reset">
    <!-- 重置所有输入 -->

   <div class="button">
       <button>提交</button>
   </div>
</form>