HTML5从表格选择创建网址

我有一个用户管理网站，我希望有更好的网址。实质上，客户端将会看到一个用户列表，他们可以选择一个用户的页面。所以，我有两个选择：HTML5从表格选择创建网址

我可以用这样的URL文本列表呈现给用户，并将它滚动：

<ul style="height:300px;overflow:auto"> 
<li><a href="/profiles/1">User 1</a></li> 
<li><a href="/profiles/2">User 2</a></li> 
</ul>

我可以用一个稍微人性化呈现给用户像这种形式/选择：

<form action="/profiles/" method="GET"> 
<select name="user"> 
<option value="1">User 1</option> 
<option value="2">User 2</option> 
</select> 
<input type="submit"> 
</form>

我有好恶两个，是我真正想要的是最好的Ø ˚F两全其美：

我想有一个像/profiles/1“漂亮”的网址。
我想让用户界面像一个简单的下拉菜单，用户只需键入该项目的前几个字符，它就会跳到它。（最后一部分是有点大事，有1000名用户）。它不一定是这个，而是可用性上的一些等价物。
我不是看起来像/profiles/?user=1的网址的粉丝，他们可能是/profiles/1。

到目前为止，我已经能够拿出最好的是有/profiles/?user=1无缝重定向到/profiles/1。所以用户体验很顺利，但我很好奇，如果有人能做得更好:-)。

想法？

来源

2013-04-04 Evan Teran

你的意思是如果你使用表单元素，你会被默认的url结构卡住。你是否限制使用JavaScript？ – 2013-04-04 20:12:39

我会javascript是公平的游戏，但如果有人有更具创意的解决方案，我也会对此感兴趣。 – 2013-04-04 20:20:00

我想如果你想以一个聪明的混蛋的名义避免javascript，你可以使用一个css：hover伪类来扩展一个包含典型锚定标签的div。喜欢的东西：

.dropdown_parent { 
    height:1.25em; 
    width:100px; 
    display: inline_block; 
    position:relative; 
} 
.dropdown { 
    max-height:1.25em; 
    overflow:hidden; 
    line-height:1.25em; 
    border: 1px solid black; 
    background: white; 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
} 
.dropdown:hover { 
    max-height:10em; 
    overflow:auto; 
}

HTML：

<div class="dropdown_parent> 
    <div class="dropdown"> 
     <a>link</a> 
     <a>link</a> 
     <a>link</a> 
    </div> 
</div>

请注意，我没有测试过这在所有。

更严重的是，javascript几乎是这种事情的方式。

来源

2013-04-04 21:38:02 user1618143

我想为您的选择2（产生通过表单URL），你可以尝试这样的：

<form id="urlForm" onsubmit="this.action = '/profiles/' + this.user.options[this.user.selectedIndex].value;" method="GET"> 
<select id="user"> 
<option value="1">User 1</option> 
<option value="2">User 2</option> 
<option value="3">User 3</option> 
</select> 
<input type="submit" /> 
</form>

，但是浏览器可能不会允许这种类型的脚本默认情况下运行，并且它不会当然如果脚本被关闭或不可用，则完全可以工作。在我的测试中，这在Chrome中起作用，在Firefox上失败，并且IE提示我接受运行的脚本。

如果有一个新的HTML5输出属性，所以你可以计算/ @ action形式的内容，但是我猜这里面有各种各样的安全问题。

来源

2013-05-24 11:45:16

有趣的做法，我会试试看看会发生什么:-) – 2013-05-24 13:47:27

HTML5从表格选择创建网址

回答

相关问题