html表单怎么制作，html表单代码

type=password 可以定义一个密码控件，例如：

<div class="ui attached segment">    <div class="required inline field ">        <label for="user_name">用户名或邮箱</label>        <input id="user_name" name="user_name" value="" autofocus="" required="">    </div>    <div class="required inline field ">        <label for="password">密码</label>        <input id="password" name="password" type="password" autocomplete="off" value="" required=""><!-- 密码表单 -->    </div>    <div class="inline field">        <label></label>        <button class="ui green button">登录</button>    </div> </div>

2.5 隐藏输入框

JavaScript 没有全局变量的功能，有时需要定义全局变量，可以用 cookie 来实现，但是浏览器可以关闭 cookie ，而且 cookie 在发送 HTTP 时会被带上，浪费数据传输，这时使用隐藏域的方式实现比较简单。例如：

<form action="https://www.baidu.com" method="post" onclick='beforeSubmit()'>    <input type="hidden" id='_viewstate' name="_viewstate" /><!--隐藏域-->    <input type="submit" value="click" /> </form> <script> function beforeSubmit(){//提交表单前执行赋值函数    document.getElementById("_viewstate").value = document.referrer; } </script>

上述代码通过定义隐藏域，当点击提交按钮时将该页面的上个页面的 URL 传输给表单的目标 URL，做到传输值的作用。

2.6 文件表单

有时需要做一个上传文件的功能，这时需要用到文件表单，通过设置 type=file 可以定义文件表单控件，还需要设置 enctype=multipart/form-data 编码方式，才能正确传输文件，例如：

<form  action="/user/settings/avatar" method="post" enctype="multipart/form-data">    <div>        <label for="avatar">选择新的头像</label>        <input name="avatar" type="file">    </div> </form>

2.7 重置按钮

重置按钮用于将表单内的控件的值重置为初始化状态，并非清空数据，表单中的初始化数据定义在 value 值中，而且重置按钮必须包裹在 form 表单标签中，例如：

<form  action="/user/settings" method="post">    <div>        <label for="username">用户名</label>        <input id="username" name="name" value=""  autofocus="" required="">*<!--初始化表单是空-->    </div>    <div>        <label for="full_name">自定义名称</label>        <input id="full_name" name="full_name" value=""><!--初始化表单是空-->    </div>    <div>        <label for="email">邮箱</label>        <input id="email" name="email" value="" required="">*<!--初始化表单是空-->    </div>    <div>        <label for="website">个人网站</label>        <input id="website" name="website" type="url" value=""><!--初始化表单是空-->    </div>    <div>        <label for="location">所在地区</label>        <input id="location" name="location" value=""><!--初始化表单是空-->    </div>    <div>        <input type="reset" value="重置"><button class="ui green button">更新信息</button>    </div> </form>

2.8 提交按钮

提交按钮相当于表单 form 的开关，点击这个开关相当于将表单中的数据提交给服务器。通过设置 type=submit 可以定义一个提交表单按钮，这个按钮必须包裹在 form 标签中才能生效，例如：

<form class="ui form" action="/user/settings" method="post">    <div class="required field ">        <label for="username">用户名<span class="text red hide" id="name-change-prompt"> 该操作将会影响到所有与您帐户有关的链接</span></label>        <input id="username" name="name" value="" data-name="jdhg" autofocus="" required=""><!--初始化表单是空-->    </div>    <div class="field">        <input type="submit" value="提交">    </div> </form>

3. 小结

本章介绍了网页中客户与服务器交互数据的方式 - 表单，通过表单用户可以将数据发送到服务器，围绕这个功能浏览器定义了一系列的提交方式、认证方式、数据类型等功能，通过复杂的交互方式网页可以实现真正的互联网属性而不是单纯的视觉展现。